HTML5 audio

A simple audio player can be added to an HTML document.

Default audio player controls

The default view for the player in different browsers is as follows:

Markup

To add audio to a page, the markup should look as follows:

<audio controls preload="auto">
    	<source src="media/soundfile.ogg" type="audio/ogg" />
    	<source src="media/soundfile.mp3" type="audio/mpeg" />
    	<object type="application/x-shockwave-flash" data="player.swf?soundFile=media/soundfile.mpg">
        	<param name="movie" value="player.swf?soundFile=media/soundfile.mpg" />
    	</object>
    	<a href="media/soundfile.mp3">Download audio clip</a>
</audio>

Audio tag attributes

Various attributes can be added into the audio tag:

• controls: Playback controls for the audio are displayed.
• autoplay: The audio plays upon page load without any input from the user.
• loop: The audio plays endlessly.
• preload=“value”: Values in the quotes can be none, auto or metadata. none ensures that the audio isn’t preloaded, auto ensures that the audio is preloaded, and if metadata is added, only the metadata of the audio is loaded.

File formats for different browsers

So that the sound will work in multiple browsers, the following must be added as sources within the audio tags:

• .ogg file, which will work in Firefox.
• .mp3 file, which will work in Safari.
• .mpg file for IE, which needs to be supplied via Flash.
• A link to the audio file can be provided as a last resort after the source declarations, and any browsers that don’t support the audio content will show the link instead. Similarly, a text transcript can be placed here.
• Sound files can be converted at media.io.

Audio player with custom controls

By interacting with the audio API with Javascript, we can style up the buttons in a different way to the default player. Here is a very simple example using styled links:

Markup

<audio id="audioPlayer" preload="auto">
	<source src="soundfile.ogg" type="audio/ogg" />
    	<source src="soundfile.mp3" type="audio/mpeg" />
    	<object type="application/x-shockwave-flash" data="player.swf?soundFile=soundfile.mpg">
        	<param name="movie" value="player.swf?soundFile=soundfile.mpg" />
    	</object>
    	<a href="soundfile.mp3">Download audio clip</a>
</audio>
                
<div>
    	<a onClick="document.getElementById('audioPlayer').play()">Play</a>
    	<a onClick="document.getElementById('audioPlayer').pause()">Pause</a>
    	<a onClick="document.getElementById('audioPlayer').volume+= 0.1">Volume up</a>
    	<a onClick="document.getElementById('audioPlayer').volume-= 0.1">Volume down</a>
</div>

Audio player using jPlayer

jPlayer is a jQuery plugin, which does pretty much all the hard work for us, and lets us skin the audio player however we want (view the demo source to see how this was integrated). Here is my styled version: