Attributes
The <audio> tag supports several attributes that allow you to control the behavior and appearance of the audio player. These are some commonly used attributes:
1. `autoplay`: Specifies that the audio should start playing automatically when the page loads.
2. `loop`: Specifies that the audio should start over again every time it finishes.
3. `muted`: Specifies that the audio output should be muted.
4. `preload`: Specifies whether the audio file should be loaded when the page loads. Possible values are "auto", "metadata", or "none".
Example
<audio controls autoplay loop muted preload="auto">
<source src="audiofile.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
In this example, the audio will start playing automatically, repeat indefinitely, and be muted by default.
Explanation
- Autoplay automatically starts the audio.
- The loop repeats the audio.
- The muted ensures the audio is muted when it starts.
- The preload="auto" makes the browser preload the audio for faster playback.
Global Attributes
The <audio> tag also supports global attributes, which are attributes that can be used on any HTML element. Some commonly used global attributes with the <audio> tag are:
1. `class`: Specifies one or more class names for the audio element, allowing you to apply CSS styles or target the element with JavaScript.
2. `id`: Specifies a unique identifier for the audio element, which can be used to target the element with CSS or JavaScript.
3. `style`: Allows you to apply inline CSS styles directly to the audio element.
4. `title`: Specifies extra information about the audio element, which can be displayed as a tooltip when hovering over the element.
For example:
<audio src="audio_file.mp3" class="background-music" id="bgm" style="display: none;" title="Background Music">
Your browser does not support the audio element.
</audio>
In this example, the audio element has a class of "background-music", an ID of "bgm", an inline style that hides the audio player, & a title of "Background Music".
Event Attributes
The <audio> tag supports various event attributes that allow you to trigger JavaScript functions based on specific events related to the audio playback. Some commonly used event attributes are:
1. `onplay`: Specifies a function to be called when the audio starts playing.
2. `onpause`: Specifies a function to be called when the audio is paused.
3. `onended`: Specifies a function to be called when the audio playback has ended.
4. `onvolumechange`: Specifies a function to be called when the volume of the audio changes.
For example:
<audio src="audio_file.mp3" onplay="startAnimation()" onpause="stopAnimation()" onended="showMessage()">
Your browser does not support the audio element.
</audio>
<script>
function startAnimation() {
// Code to start an animation when the audio starts playing
}
function stopAnimation() {
// Code to stop the animation when the audio is paused
}
function showMessage() {
// Code to display a message when the audio playback has ended
}
</script>
In this example, the `onplay` attribute triggers the `startAnimation()` function when the audio starts playing, the `onpause` attribute triggers the `stopAnimation()` function when the audio is paused, and the `onended` attribute triggers the `showMessage()` function when the audio playback has ended.
Autoplay Audio
The attribute is utilized in auto playing the audio when the page is loaded. This feature can be of good use for adding background music or effects that do not have a button the user will have to click on it before the playback.
Example
<audio autoplay>
<source src="audiofile.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Explanation
- The autoplay attribute will make the audio begin playing as soon as it loads on the page.
- If a browser does not support the audio element, it will display the text "Your browser does not support the audio element".
Note: Some users may find it irritating when they cannot stop or mute an audio. So use autoplay judiciously.
Muted Audio
The muted attribute is used to mute the audio. This might be helpful if you want to load an audio file but do not wish to play it with the sound on, or if you wish the user to start the audio themselves.
Example
<audio muted>
<source src="audiofile.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Explanation
- The muted attribute ensures that audio is muted initially.
- You can still use the play button to start the audio, but it will start with no sound.
Note: The muted audio is also commonly used with autoplay videos or in a scenario where the user may like to control the sound later.
Audio with Multiple Sources
The <audio> tag supports multiple audio sources, which ensures that the element is compatible with all browsers. Adding multiple source elements allows the browser to load the first supported audio file.
Example
<audio controls>
<source src="audiofile.ogg" type="audio/ogg">
<source src="audiofile.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Explanation
- The audio element has two source tags. If the browser supports Ogg format, it will play audiofile.ogg. If it does not support Ogg, it will try to load the audiofile.mp3 file.
- The controls attribute is used here, which adds playback controls (play, pause, volume) to the audio player.
Note: By providing multiple formats, you ensure that users on different browsers or devices can still hear your audio.
Add Audio Using “Embed” Tag
Although the <audio> tag is the way to add audio to your web page, you can make use of the <embed> tag. The tag is used to embed the media, which can range from audio to video as well.
Example
<embed src="audiofile.mp3" type="audio/mp3" width="300" height="50">
Explanation
- Use the embed tag to embed an audio file. Simply specify the src and the type attributes.
- The width and height attributes control the size of the embedded audio player.
- Unlike the <audio> tag, the <embed> tag doesn't include playback controls. You'll have to either add custom controls or leave it to the browser.
Note that the <embed> tag is less commonly used for audio and is obsolete for this purpose in favor of the <audio> tag.
Supported Formats
The <audio> tag supports a variety of audio formats. The most common audio formats supported by browsers are MP3, Ogg, and WAV. Your choice of format depends on the compatibility you want to ensure across different browsers.
Common Formats
- MP3 (audio/mp3): It is widely supported and commonly used.
- Ogg (audio/ogg): It is an open-source format, often used for its smaller file size and better compression.
- WAV (audio/wav): Uncompressed format, leading to larger file sizes.
Example
<audio controls>
<source src="audiofile.ogg" type="audio/ogg">
<source src="audiofile.mp3" type="audio/mp3">
<source src="audiofile.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>
Explanation
- The audio element provides three sources: .ogg, .mp3, and .wav. The browser will choose the first format it supports.
- This ensures that users with different browsers can still hear the audio.
Frequently Asked Questions
What is the <audio> tag used for?
The <audio> element embeds audio files directly within a webpage, so a user can listen to it without the need to navigate away from the browser window.
How can I make my audio play automatically when the page loads?
You can use the autoplay attribute within the <audio> tag to make the audio start playing automatically when the page loads.
What formats are supported by the <audio> tag?
MP3, Ogg, and WAV are the most supported formats for the <audio> tag. For sure, it is more recommended to provide multiple formats so that it can cater to various browsers.
Conclusion
In this article, we went through the process of how to embed audio in your website using the HTML <audio> tag. We discussed some features, such as autoplay, mute audio, and supporting multiple audio formats. You can now easily embed audio files in your web projects and control how they behave with a better understanding of the syntax and attributes of the <audio> tag.
518+ registered 
