With an aim to minimize use of proprietary technology like Flash in web sites, HTML’s latest flavor HTML5 has made several enhancements like the quick-n-easy playing of audio and video files. Let’s take a look at various options and complications when it comes to embedding and streaming audio.

Embedding an audio file is easy. All you need to do is to include a path to an audio file in an audio tag.

<audio src="somesong.mp3"></audio>

Whatever you include within the audio tags will be shown in browsers that do not support HTML5. For, example:

<audio src="somesong.mp3">No support in your browser</audio>

To play audio automatically, on page load, you need to include the autoplay attribute.

<audio src="somesong.mp3" autoplay></audio>

To play that audio file in loop, add a loop attribute

<audio src="somesong.mp3" autoplay loop></audio>

It is not a great idea to play sound automatically and/or in loop as it eats out on the users’ bandwidth who may not be interested in hearing that audio in the first place. The web is all about interaction and choices, so we need to look at a way to include audio controls.

Easy again. The controls attribute.

<audio src="somesong.mp3" controls></audio>

This shows a neat audio player giving the user ability to play, pause, and standard volume controls.

Also of practical importance is the attribute preload. You can use preload=”none” to make sure the browser loads the audio only when it is played or preload=”auto” when you want the browser to pre-load an audio.

<audio src="somesong.mp3" controls preload=”none”></audio>

Making your own custom audio player

Let’s try something more challenging now. If you want more control over how the audio player in your site will look, you can use JavaScript to interact with HTML5 Audio API

<audio id="player" src="somesong.mp3"> No support in your browser </audio>
<div>
<button onclick="document.getElementById(‘player’).play()"> » Play
</button>
<button onclick="document.getElementById(‘player’).pause()"> || Pause
</button>
<button onclick="document.getElementById(‘player’).volume += 0.1"> + Volume Up
</button>
<button onclick="document.getElementById(‘player’).volume -= 0.1"> – Volume Down
</button>
</div>

You are free to style and add effects to these buttons the way you want using CSS, jQuery and the likes.

Complications

So far so good, seemed like a cakewalk? Now comes the tricky part of implementing HTML5 features right away. Browser incompatibility and restricted support forces us to make some workarounds to make our audio file and player working. Here’s the deal: Firefox won’t play MP3 files this way but will play .ogg (Ogg Vorbis) files. Safari won’t play .ogg files but will readily play MP3.
To play audio files in both browsers, we have the option to use the source tag within the audio tag and include individual supported formats

<audio controls>
<source src="somesong.ogg" />
<source src="somesong.mp3" />
</audio>

And not to mention, our favorite Internet Explorer (sic), doesn’t support the audio tag itself! To play audio in IE, we need to fall back to using Flash, as before, even if it beats the whole purpose. We can still use our audio tag like below with graceful degradations:

<audio controls>
<source src="witchitalineman.ogg" />
<source src="witchitalineman.mp3" />

<object type="application/x-shockwave-flash" »
data="player.swf?soundFile=somesong.mp3">
<param name="movie" »
value="player.swf?soundFile=somesong.mp3">
<a href="somesong.mp3">Download the song</a>
</object>
<p>No browser support for this feature</p>
</audio>

That’s the beauty of HTML5! Each audio format will be exposed only to the browsers it is supported by and rendered accordingly.

Latest posts by Smarajit Dasgupta

  • Share/Bookmark