HTML Audio: An Overview
In this article, we will explore HTML Audio in detail, including the different types of audio files that can be embedded using HTML, the tags and attributes used to embed audio, and best practices for using HTML Audio in web your development.
The <audio> tag in HTML and HTML5 allows audio files to be embedded into web pages. In order to play the audio file in certain browsers, it is encoded using special codecs since all audio formats are not supported by all browsers.
What Is HTML Audio?
HTML Audio is a powerful tool for web developers, allowing them to embed audio files directly into web pages.
This can be used to provide background music, sound effects, or even spoken content.
HTML Audio is supported by most modern web browsers and can be easily customized to suit the needs of different applications.
HTML Audio supports several types of audio files, including:
| Types | Overview |
| MP3 | MP3 is the most commonly used audio format on the web. It provides high-quality audio with relatively small file sizes. |
| WAV | WAV is a lossless audio format that provides high-quality audio with large file sizes. |
| Ogg | Ogg is a free, open-source audio format that provides high-quality audio with relatively small file sizes. |
HTML Audio Tags and Attributes
HTML provides several tags and attributes that allow you to embed audio files into web pages.
Here are some of the most commonly used tags and attributes:
Html <audio> Tag
The <audio> tag is used to embed audio files into web pages.
The src attribute is used to specify the URL of the audio file.
The controls attribute is used to display playback controls, such as play, pause, and volume.
Below is an example for using <audio> tag in HTML to play an audio file:
Example:
HTML Audio Autoplay
The autoplay attribute is used to automatically start playing the audio file when the web page is loaded:
Example
IMPORTANT: In most cases, Chrome doesn’t support autoplay. Nevertheless, muted autoplay is always allowed. Put muted after autoplay to make your video play by itself (but muted):
Example
HTML <audio> loop
You can use the loop attribute in the <audio> tag to create an infinite loop for your audio file. This means that the audio will play continuously, starting from the beginning of the file once it reaches the end.
The loop attribute can be added to the <audio> tag as follows:
Example:
HTML audio with Embed Tag:
The <embed> tag allows you to embed audio content from external sources, such as streaming services or audio files hosted on a separate server.
The <embed> tag is an ancient method of inserting audio onto a webpage. However, it is relatively inefficient when compared with alternative approaches.
To use the <embed> tag, the user needs a plugin like MIDI or QuickTime for compatibility.
Here’s an example of how to use the <embed> tag to embed an audio file:
Example:
Browser Compatibility:
There is a list in the table of the first browser version that formally accommodates the <audio> element.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
HTML Audio Extensions:
There are three supported audio formats: MP3, WAV, and OGG. The browser support for the different formats is:
| Browser | MP3 | WAV | OGG |
|---|---|---|---|
| Edge/IE | YES | NO | NO |
| 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 | Events:
The HTML DOM’s <audio> element defines its properties, methods, and events.
Audio can be loaded, played, paused, and can be modified for duration and volume.
Additionally, you can receive notifications when audio begins playing, is paused, etc.
Visit our HTML Audio/Video DOM Reference for a full DOM explanation..
HTML Audio Best Practices
Here are some best practices for using HTML Audio:
- Use appropriate file formats for different types of audio. For example, use MP3 for music and speech, and use WAV for high-quality audio.
- Optimize audio files to reduce their size and improve page loading times. Use tools such as Audacity to reduce audio file size without sacrificing quality.
- Provide alternative text for audio content. Alternative text allows users who cannot hear the audio to understand what it represents.
- Use autoplay sparingly for audio content. Autoplay can be annoying to users, especially if the audio is loud or distracting.
- Ensure that audio content is accessible to all users, including those with disabilities. Provide transcripts or captions for spoken content and ensure that audio content can be accessed with screen readers.
- Test audio content on different browsers and devices to ensure that it works correctly and is displayed correctly. Consider using responsive design to ensure that audio content is displayed correctly on different screen sizes.
