<audio>

Definition

The HTML 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 preload, autoplay, loop, and muted. The controls attribute is also commonly used to provide a user interface for controlling the audio, such as play, pause, and volume buttons.

Examples

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>

The 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.

Attributes

Best Practices

There are several best practices to keep in mind when using the HTML <audio> element:

• Use the controls attribute 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 autoplay attribute 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 loop attribute 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 preload attribute 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 <figcaption> and <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

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.

Browser Compatibility