3.1 Basics of <audio> Tag
The <audio> tag in HTML5 is used to embed audio files on a webpage. This element supports various audio formats and provides users with built-in controls for play, pause, and volume adjustment.
Simple Example
The <audio> tag is used with the src attribute, which specifies the path to the audio file. You can also add the controls attribute to display standard controls, like play, pause, and volume adjustment buttons.
<audio src="audiofile.mp3" controls></audio>
Example with Multiple Sources
To ensure support across different browsers, you can specify multiple audio sources using the <source> tag. This allows the browser to choose a supported audio format.
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Attributes of the <audio> Tag
src: specifies the path to the audio file.controls: displays playback controlsautoplay: automatically plays audio when the page loadsloop: repeats the audio playback after completionmuted: mutes the audio on loadingpreload: indicates how the browser should load the audio. Possible values: none, metadata, auto
3.2 Examples of Using Attributes
Control Attribute
The controls attribute adds standard playback controls, such as "Play", "Pause" buttons, and a volume slider to the audio element. This attribute makes the audio element more interactive and user-friendly.
Example:
<audio src="audiofile.mp3" controls></audio>
Autoplay Attribute
The autoplay attribute makes the audio file automatically start playing as soon as the page loads. Use this attribute carefully, as unexpected audio playback can annoy users.
Example:
<audio src="audiofile.mp3" autoplay></audio>
Loop Attribute
The loop attribute indicates that the audio file should play in an infinite loop. This is useful for background music or sound effects that need to repeat.
Example:
<audio src="audiofile.mp3" autoplay loop></audio>
Muted Attribute
The muted attribute mutes the audio file on loading. This can be helpful if you want the audio to play silently by default, allowing the user to unmute it if desired.
<audio src="audiofile.mp3" muted></audio>
Preload Attribute
The preload attribute tells the browser how it should load the audio file when the page loads. It can take one of three values:
none: the browser should not preload the audiometadata: the browser should load only metadata (duration, dimensions, etc.)auto: the browser should load the entire audio when the page loads
<audio src="audiofile.mp3" preload="auto"></audio>
3.3 Supported Audio Formats
To ensure cross-browser compatibility, it's recommended to use multiple audio formats. The most common formats include MP3, OGG, and WAV. Let's take a closer look.
MP3 Format
MP3 (MPEG-1 Audio Layer III) is one of the most popular audio formats. It's supported by most browsers and devices. MP3 uses lossy compression, reducing file size while maintaining relatively high sound quality.
Example:
<audio src="audiofile.mp3" type="audio/mpeg"></audio>
OGG Format
OGG (Ogg Vorbis) is an open-source lossy audio compression format supported by most modern browsers. This format offers good sound quality and is often used as an alternative to MP3.
Example:
<audio src="audiofile.ogg" type="audio/ogg"></audio>
WAV Format
WAV (Waveform Audio File Format) is an uncompressed audio format that offers high sound quality. However, WAV files are larger compared to MP3 and OGG, making them less common for web use.
Example:
<audio src="audiofile.wav" type="audio/wav"></audio>
3.4 Format Compatibility
Not all browsers support the same audio formats. To ensure cross-browser compatibility, it's recommended to use multiple audio formats like MP3, OGG, and WAV.
Example with Multi-Format Support:
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
<source src="audiofile.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
Accessibility
To ensure accessibility, provide a text alternative for cases where the browser doesn't support the <audio> element or audio files. You can do this with text between the opening and closing <audio> tags.
Example for Accessibility:
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="audiofile.ogg" type="audio/ogg">
<source src="audiofile.wav" type="audio/wav">
Your browser does not support the audio element.
You can download the audio file <a href="audiofile.mp3">here</a>.
</audio>
Understanding the capabilities of the <audio> tag and its API helps create more interactive and accessible web pages.
GO TO FULL VERSION