The audio-tag comes with some pretty handy features. By applying the controls attribute, we add things like play, pause and volume control. This is what's known as a Boolean attribute. A Boolean attribute will always be either true or false and does not contain a value, like other element attributes. By typing the attribute name, the attribute is set to "true." The absence of the attribute equates to “false.”
<audio controls>
<source src="file.mp3" type="audio/mpeg" />
<source src="file.ogg" type="audio/ogg" />
This browser does not support the linked audio file.
</audio>
Below is a list of other Boolean attributes available for the audio tag. Click on each attribute name to learn more about its function and purpose.
|
The audio player will start playing on its own once enough of the data is loaded. |
|
|
This is the most typically used player attribute. This attribute displays the player's audio controls, which will usually include the play button, pause, a slider for the time position, and a volume adjuster. |
|
|
The sound file will start over again once it reaches the end. |
|
|
This indicates that the audio file will initially be set to mute. |
Another handy tool is the preload attribute. By default, a browser will automatically load part or all of an audio file so that it's ready to play once the user clicks. Depending on the number of audio files used on your page, this can slow page load times and cause avoidable delays, especially if the audio that's included isn't intended for all audiences. Below is a list of the preload attribute values and what they mean.
| Preload Value | Purpose |
|---|---|
| auto | This is the default setting and the behavior taken if no preload attribute is included. The browser will download part or all of a file to prepare it for use. |
| metadata | Only kilobytes-worth of the file will download just to give the user some basic information such as the file's time length. |
| none | The browser will not download any of the file. The user will need to click play to initiate the file download. This option may be mildly inconvenient for users who do want the audio as they must wait for it to load. However, with Internet speeds what they are today, this is often a worthwhile trade-off. |
<audio controls preload="auto">
<source src="file.mp3" type="audio/mpeg" />
<source src="file.ogg" type="audio/ogg" />
This browser does not support the linked audio file.
</audio>
Question
When might audio be reserved for certain viewers and not others?
Some sites offer additional audio assistance for users with visual impairments. Although screen readers are widely available, their abilities are somewhat limited since they read and interpret only what's written in the HTML. Some designers opt to have additional audio content available, which is more descriptive and immersive, to enhance the experience of visually impaired users on their site.
You Try!
Using your own text editor or the coding space below, practice applying an audio tag to a basic web layout. Does it behave as an inline or block element? What are the limitations of its styling? Are you able to change its position on the page?
Tip: If you size your audio element with a width of 100% and then set a min-width, your audio controls will have a bit more flexibility in adapting to your browser width and any containing elements that may house them.
