HTML <audio> Tag
Here, we’ll talk about Tag Audio. With the intention that it would meet the educational requirements.
The HTML audio tag is an HTML element used to embed audio content, such as music or sound effects, into a web page. The audio tag is represented by the <audio> tag and can be used to specify various attributes such as the source of the audio file, the type of the audio file, and whether the audio should autoplay or loop.
The sound file will play:
Example
Here is the basic example of the audio tag:
Example:
Benefits of using HTML <audio> Tag
Here are some benefits of using the <audio> tag:
- The <audio> tag provides a seamless audio experience for website visitors. Visitors can listen to audio content directly on the page, without the need to navigate to an external audio player.
- The <audio> tag can improve accessibility for people who are visually impaired or have difficulty reading. Audio content can provide an alternative way to consume content on the page.
- The <audio> tag can make content more engaging by providing an additional way to present information to website visitors.
- By embedding audio content on a page, website owners can increase traffic and engagement on their website. Visitors are more likely to spend time on a page with audio content than on a page without it.
- The <audio> tag can improve search engine optimization (SEO) by providing search engines with more information about the content of the page. Search engines can index audio content, which can help to improve the visibility and ranking of the page in search results.
- The <audio> tag is supported by most modern web browsers, making it compatible across different platforms and devices.
Uses and Definition
By utilizing Tag Audio <audio>, you can embed music or other audio files in a document.
It may contain multiple <source> tags with different audio sources. As soon as the browser detects a compatible source, it will select it.
Only browsers unable to recognize the audio element will display the text between the <audio> and </audio> tags.
As of now, HTML supports three types of audio formats: MP3, WAV, and OGG.
Audio Format and Browser Compatibility
| 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 |
Tips and Notes
Browser Compatibility
If you look at the table’s numbers, you’ll see which browser version initially offers complete support for the element.
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <audio> | 4.0 | 9.0 | 3.5 | 4.0 | 11.5 |
Attributes
| Attribute | Value | Overview |
|---|---|---|
| controls | controls | Provides details on how audio controls should appear. (for example, the play/pause button) |
| autoplay | autoplay | Declares that the audio will begin playing once it has been processed. |
| preload | auto metadata none | Whenever a page starts loading, the author determines if and how should render the audio. |
| src | URL | Provide the audio file’s URL |
| loop | loop | A method that starts the audio from scratch after each end of the recording. |
| muted | muted | Creates the muted output for audio. |
Global Attributes
<audio> could utilize HTML’s Global Attributes with the Tag Audio.
Event Attributes
<audio> could utilize HTML’s Event Attributes with the Tag Audio.
Related Pages
For better understanding, have a look at HTML DOM reference: HTML Audio/Video DOM Reference
CSS settings by default
There is no room for CSS styling in the audio Tag .
