How to Embed Audio in HTML | Everything You Should Know About the Audio Tag in HTML
{tocify} $title={Table of Contents}
The HTML <audio> element is used to embed audio content in web pages. It is a self-contained tag that does not require any external plugins or additional software to work.
This element has a number of attributes that allow developers to customize the appearance and behavior of the audio player.
Basic Syntax:
To include audio content on a web page using HTML <audio> element, the basic syntax is as follows:
<audio src="audiofile.mp3" controls></audio>{codeBox}
In the example above, the "src" attribute specifies the URL of the audio file, while the "controls" attribute adds standard playback controls to the player.
Other attributes can be added to customize the player's appearance and behavior further.
Attributes:
The <audio> element has a number of attributes that can be used to customize the appearance and behavior of the audio player.
Some of the commonly used attributes are:
- src: Specifies the URL of the audio file to be played.
- Controls: Adds standard playback controls to the player.
- Autoplay: Automatically starts playing audio when the page loads.
- Loop: Repeats the audio when it reaches the end of the file.
- Preload: Specifies how the browser should load the audio file (e.g., "auto", "metadata", or "none").
- Muted: Starts playing audio with the muted sound.
Compatibility:
All modern web browsers, including Chrome, Firefox, Safari, and Edge, support the HTML <audio> element. However, different browsers may support various file formats.
For example, Chrome and Firefox support the MP3, Ogg, and WAV formats, while Safari and Edge also support the AAC format.
HTML <audio> Element
To play an audio file in HTML, utilize the <audio> element:
Example:
<!DOCTYPE html><html><body><audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg"></audio></body></html>{codeBox}
HTML Audio - How It Works
The controls attribute adds audio playback controls to the player, like play, pause, and volume.
The <source> element permits you to specify alternative audio files from which the browser may choose. The browser will utilize the first recognized format.
The text between the <audio> and </audio> tags will only be shown in browsers that do not support the <audio> element.
HTML <audio> Autoplay
To start an audio file automatically, utilize the autoplay attribute:
Example:
<!DOCTYPE html><html><body><audio controls autoplay><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio></body></html>{codeBox}
Note: Chromium browsers Don't permit autoplay in most cases. However, muted autoplay is always allowed.{alertSuccess}
Add muted after autoplay to allow your audio file begin playing automatically (but muted):
Example:
<!DOCTYPE html><html><body><audio controls autoplay muted><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio></body></html>{codeBox}
HTML Audio Formats
There are 3 supported audio formats: MP3, WAV, and OGG. The browser support for the various formats is:
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | YES | YES* | YES* |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
HTML Audio - Media Types
| File Format | Media Type |
|---|---|
| MP3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
HTML Audio - Methods, Properties, and Events
The HTML DOM represents methods, properties, and events for the <audio> element.
This allows you to load, play, and pause audios and set duration and volume.
DOM events can also notify you when audio begins to play, is paused, etc.
HTML Audio Tags
| Tag | Description |
|---|---|
| <audio> | Defines sound content |
| <source> | Defines multiple media resources for media elements, such as <video> and <audio> |
Conclusion:
Friends, according to my expertise, I have written complete information to help you with “HTML <audio> Element.” If this post is favorable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
