HTML Audio
The HTML Audio offers the <audio> element, that allows websites to provide background music, sound effects, or play any audio content required for the website and enhance the overall user experience. The element <source> is wrapped inside the <audio> element that defines the source of the audio files as a value of an attribute src.
Syntax
<audio>
<source src="sample.mp3" type="audio/mpeg">
</audio>
Note: Additionally, there are three formats supported including MP3, WAV, and OGG, in HTML5. The <audio> supports the global attributes and event attributes.
Table of Content
- Functionality of HTML Audio
- HTML Audio Media Types
- HTML
Functionality of HTML Audio
- The controls attribute specifies which controls including volume, play, and pause on the audio player.
- Autoplay designates that the audio file will play as soon as controls are loaded.
- The attribute loop specifies that the audio file is set to continuously repeat.
- The attribute src defines the URL of the audio file.
- The attribute muted specifies the audio file should be muted.
HTML Audio Media Types
- The mp3 file format with media type audio/mpeg.
- The ogg file format with media type audio/ogg.
- The wav file format with media type audio/wav.
HTML <audio> Autoplay
The autoplay attribute is used to start an audio file automatically.
Example: The example illustrates the HTML audio with the attribute autoplay.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >HTML Audio</ title > </ head > < body > < div > < p >Audio Controls Autoplay</ p > <!-- audio tag starts here --> < audio controls autoplay> < source src = "testAudio.mp3" type = "audio/mpeg" > </ audio > <!-- audio tag ends here --> </ div > < div > < p >Audio Controls Autoplay Muted</ p > <!-- audio tag starts here --> < audio controls autoplay muted> < source src = "testAudio.mp3" type = "audio/mpeg" > </ audio > <!-- audio tag ends here --> </ div > < div > < p >Audio Controls Autoplay Loop</ p > <!-- audio tag starts here --> < audio controls autoplay loop> < source src = "testAudio.mp3" type = "audio/mpeg" > </ audio > <!-- audio tag ends here --> </ div > </ body > </ html > |
Output:
Browser Support
- Google Chrome 3
- Firefox: 3.5
- Opera: 10.5
- Safari: 3.1
- The ogg audio file is not supported by safari.