List of Topics

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:

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:

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

Ron Kurtus' Credentials

Websites

HTML <audio> Tag - W3schools.com

HTML5 Primer: How To Use the Audio Tag - HTMLGoodies.com

Web Design Resources

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.

Copyright © Restrictions


Where are you now?

School for Champions

Web Design topics

HTML5 Audio Tag




Web Design topics

Goals

Purpose

Preliminaries

Content with HTML

Format with CSS

Navigation

Usability

Responsive websites

Visibility

Also see



Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.





Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!



The School for Champions helps you become the type of person who can be called a Champion.