X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

HTML5 Audio


HTML5 provides a standard for playing audio files.


Audio on the Web

Before HTML5, there was no standard for playing audio files on a web page.

Before HTML5, audio files had to be played with a plug-in (like flash). However, different browsers supported different plug-ins.

HTML5 defines a new element which specifies a standard way to embed an audio file on a web page: the <audio> element.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <audio> element.

Note: Internet Explorer 8 and earlier versions, do not support the <audio> element.


HTML5 Audio - How It Works

To play an audio file in HTML5, this is all you need:

Example

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Try it yourself »

The control attribute adds audio controls, like play, pause, and volume.

You should also insert text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.

The <audio> element allows multiple <source> elements. <source> elements can link to different audio files. The browser will use the first recognized format.


Audio Formats and Browser Support

Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg:

Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3
YES YES
Safari YES YES NO
Opera NO YES YES


MIME Types for Audio Formats

Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav


HTML5 Audio Tags

Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements, such as <video> and <audio>



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook