With the increase in bandwidth and information carrying capabilities of Internet networks, audio and video content have become prevalent over the Web. Today, it's common to see websites that are using audio in the form of Podcasts to reach out to their audiences. Some websites are even dedicated to music streaming where you can listen to your favourite songs on-demand.
Before the advent of HTML5 <audio> tag, Flash was practically the only way to deliver audio on the Web. Although Flash is an exceptionally powerful technology on Web, it works as a plugin for web browsers. For some time now, there has been a need for a browser-native way to deliver audio over the Internet. To meet this need, the <audio> element was added as a part of HTML5 specification.
In this tutorial, we will look into the basics of HTML5 audio tag. As the audio tag is not fully supported in many older browsers, we will also show an implementation of <audio> tag with Flash as fallback.
How to use the html5 audio player?
The new <audio> tag makes it very easy to add audio in web pages. Unfortunately, only some audio formats such as OGG, AAC, and MP3 can be used. And not all browsers support all these audio formats.
To insert an audio element with default browser controls like play, pause, etc., you can simply declare the <audio> tag and specify the source path of the audio file. An implementation of HTML5 audio tag in the simplest form is shown below. If the browser does not support the <audio> tag, it would show the text inside the <p> tag as a fallback message. There are many attributes for the <audio> tag such as autoplay, controls, loops, etc., which you can use.
<audio src="my_music.mp3" controls>
<p>Audio element is not supported! This is a fallback.</p>
</audio>
You can see, how the default audio players look in different browsers for the above mentioned code.
Because not all audio formats (MP3, OGG, etc.) are supported by all the browsers, a good strategy is to use the <source> element to list multiple audio sources in different formats.
<audio controls>
<source src="ogg_audio.ogg" type="audio/ogg">
<source src="aac_audio.aac" type="audio/aac">
<source src="mp3_audio.mp3" type="audio/mp3">
<p>Audio element is not supported! This is a fallback.</p>
</audio>
It is recommended to specify the "type" attribute for the <source> element. By looking at the "type" attribute, web browsers find out, whether they can play the format or not, without loading the file. It saves Internet bandwidth.
HTML5 audio with Flash fallback.
Some browsers such as Internet Explorer 8 do not support the <audio> tag. If you want your audio to play irrespective of whether the visitor's browser supports the <audio> tag or not, it is recommended to use a Flash Player fallback option. If you want to use a Flash fallback option, you can to use a third party audio library (some libraries are listed at the end of this page).
The example code below shows how to use the flash fallback option using the dewplayer.swf downloaded from http://www.alsacreations.fr/dewplayer-en. The file "dewplayer.swf" should be kept in the same directory as the mp3 file. If the browser does not support the <audio> element, the <object> tag will act as a fallback, which adds the the dewplayer.swf to play "mp3_audio.mp3" using the Flash Player plugin.
In case there is no Flash plugin, then the contents of the <p> tag which is inside the <object> tag will be shown in the browser. In this case, the <p> element is the fallback for Flash Player.
<audio controls>
<source src="ogg_audio.ogg" type="audio/ogg">
<source src="aac_audio.aac" type="audio/aac">
<source src="mp3_audio.mp3" type="audio/mp3">
<object type="application/x-shockwave-flash" data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer">
<param name="movie" value="dewplayer.swf" />
<param name="flashvars" value="mp3=mp3_audio.mp3" />
<param name="wmode" value="transparent" />
<p>Audio element and Flash Player are not supported! This is a fallback.</p>
</object>
</audio>
Here are some javascript libraries which you can use to easily insert audio in a web page with a Flash or Silverlight fallback.
HTML5 audio players for website:
