SfC Home > Web Design >
HTML5 Audio Tag
by Ron Kurtus (26 May 2016)
The HTML5 <audio> tag allows you to have an audio player on your web page. It can also be used to replace the Adobe Flash audio player.
What is distinctive about the <audio> tag is that is very simple and can display an audio interface, as well as other features. Also, if the user's browser is not updated to HTML5, a notice is displayed.
Questions you may have include:
- What is the audio tag code?
- What are the common options?
- What are other attributes?
This lesson will answer those questions.
Audio tag code
There are two common ways to display the HTML5 audio player:
<div align="center">
<audio controls src="media/sample.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
or
<div align="center">
<audio controls>
<source src="media/sample.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</div>
Example:
Note: If the MP3 file is damaged or not properly formatted, the audio controls may not work or not even display, even though the browser uses HTML5.
Explanation of options
If you want to center your player, you can use the optional <div align="center"> tag.
"controls" means the player displays the audio controls. Without it, the sound cannot be turned off.
"Your browser does not support the audio tag" will display for older browsers. You can provide any text or even JavaScript or Flash in its place. But I noticed that the text does not even show in an older Mozilla Firefox browser.
The file type can be mp3 or other common audio types.
Other <audio> tag attributes
The <audio> tag supports the full range of standard attributes in HTML5.
Besides controls new attributes for the <audio> tag include the following:
- autoplay - Audio will begin to play once it is ready
- loop - Audio will loop and play again once it has finished
- preload - This has three parameters:
- auto, which plays once it has loaded
- metadata, which only displays the data associated with the audio file, and
- none, which means it will not preload
Summary
The new HTML5 <audio> tag allows you to have an audio player on your web page. It is very simple to code and can display an audio interface, as well as other features.
Be up-to-date
Resources and references
Websites
HTML <audio> Tag - W3schools.com
HTML5 Primer: How To Use the Audio Tag - HTMLGoodies.com
Books
Top-rated books on Website Design
Questions and comments
Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. I will try to get back to you as soon as possible.
Share this page
Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:
Students and researchers
The Web address of this page is:
www.school-for-champions.com/web/
html5_audio_tag.htm
Please include it as a link on your website or as a reference in your report, document, or thesis.
Where are you now?
HTML5 Audio Tag