audio element is used to embed sound content in an HTML document. This allows web developers to easily add audio to their web pages and applications, without having to use other external platforms or plugins.
To use the
audio element, you must specify the
src attribute, which provides the URL of the audio file to be played. You can also add other attributes to control how the audio is played, such as
muted. The controls attribute is also commonly used to provide a user interface for controlling the audio, such as play, pause, and volume buttons.
Here is an example of how to use the
<audio> element to embed an audio file:
<audio controls> <source src="your-audio-file.mp3" type="audio/mpeg"> <p>Your browser does not support the audio element.</p> </audio>
controls attribute is used to display the default audio player controls, such as play/pause and volume controls. The
src attribute is used to specify the URL of the audio file, and the
type attribute is used to specify the MIME type of the audio file.
In the example above, the
<source> element is used to specify the audio file. This is because the
<audio> element can contain multiple
<source> elements, each with a different audio file. This allows you to provide multiple versions of the same audio file in different formats, so that the browser can choose the most appropriate one to use.
For example, if you have an audio file in both MP3 and OGG formats, you could use the following code to provide both versions:
<audio controls> <source src="your-audio-file.mp3" type="audio/mpeg"> <source src="your-audio-file.ogg" type="audio/ogg"> <p>Your browser does not support the audio element.</p> </audio>
In this example, if the browser supports the MP3 format, it will use the MP3 version of the audio file. If it doesn't support MP3, but does support OGG, it will use the OGG version instead.
|Specifies the URL of the audio file to be played||No|
|Specifies if and how the audio should be loaded when the page loads||No|
|Specifies that the audio should automatically start playing when the page loads||No|
|Specifies that the audio should start over again when it reaches the end||No|
|Specifies that the audio should be muted by default||No|
|Specifies that the audio should have controls (e.g. play, pause, etc.)||No|
There are several best practices to keep in mind when using the HTML
- Use the
controlsattribute to display the default audio player controls, such as play/pause and volume controls. This makes it easy for users to interact with the audio player.
- Provide multiple versions of the audio file in different formats, using the
<source>element. This allows the browser to choose the most appropriate format to use, based on the user's device and browser capabilities.
- Use the
autoplayattribute with caution. Autoplaying audio can be annoying to users, and can also interfere with screen readers and other assistive technologies. It's generally better to let the user choose when to start playing the audio file.
- Use the
loopattribute with caution. Looping audio can be annoying to users, and can also interfere with screen readers and other assistive technologies. It's generally better to let the user choose whether to loop the audio file.
- Use the
preloadattribute to specify whether the audio file should be preloaded when the page loads. Preloading can be useful if you want to make sure that the audio file is ready to play as soon as the user clicks the play button, but it can also increase page load times and use up bandwidth. It's generally best to use the
preload="metadata"value, which preloads only the basic audio metadata (such as the duration and dimensions of the audio file), rather than the entire audio file.
- Use the
<audio>element in combination with descriptive text and other elements, such as the
<track>elements, to provide additional context and information about the audio file. This can make the audio file more accessible to users with disabilities, and can also make it easier for users to understand and navigate the audio content.
Accessibility considerations for the
audio element include providing a transcript or summary of the audio for users who are unable to hear the audio, and providing alternative methods for controlling the audio (e.g. keyboard controls) for users who cannot use the default controls.
|Chrome||Firefox||Safari||Internet Explorer||Microsoft Edge||Opera|