HTML5 audio

« Previous Chapter Next Chapter »

HTML5 provides a standard for playing audio.

audio on the Web

Until now, there has never been a standard for playing audio on a web page.

Today, most audio are played through a plugin (like flash). However, not all browsers have the same plugins.

HTML5 specifies a standard way to include audio, with the audio element.

The audio element can play sound files, or an audio stream.

audio Formats

Currently, there are 7 supported formats for the audio element:

Format IE Firefox Opera Chrome Safari
Ogg Vorbis No Yes Yes Yes No
PCM in WAVE No Yes Yes Yes Yes
Vorbis in WebM No Yes Yes Yes Yes
Streaming Vorbis in WebM via MSE Unknown Yes Unknown Unknown Unknown
MP3 Yes Yes Yes Yes Yes
Wav No Yes Yes Yes Yes
Opus in Ogg Unknown Yes Unknown Yes Unknown

How It Works

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

<audio src="song.wav" controls="controls">

The control attribute is for adding play, pause, and volume controls.

Insert content between the <audio> and </audio> tags for browsers that do not support the audio element:


<audio src="song.wav" controls="controls">
Your browser does not support the audio element.
Code it Online »

The example above uses an Wav file, and will work in Firefox, Opera , Safari and Chrome.

To make the audio work in Safari, the audio file must be of type MP3 or Wav.

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


<audio controls="controls">
  <source src="song.wav" type="whiteo/wav" />
  <source src="song.mp3" type="whiteo/mpeg" />
Your browser does not support the audio element.
Code it Online »

Internet Explorer

Internet Explorer 8 does not support the audio element. In IE 9, there will be support for audio element.

All <audio> Attributes

Attribute Value Description
autoplay autoplay Specifies that the audio will start playing as soon as it is ready.
controls controls Specifies that controls will be displayed, such as a play button.
loop loop Specifies that the audio will start playing again (looping) when it reaches the end
preload preload Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
src url Specifies the URL of the audio to play

« Previous Chapter Next Chapter »

Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!