HTML5 Video Player logo
HTML5 Video Player for Mac and Windows

HTML5 Audio Embedding Quick Guide

Similar to the new < video > in HTML5, the HTML5 audio tag also made the online audio playback much easier than before.

How to Embed HTML5 Audio?

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

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

Since Internet Explorer 8 and earlier versions, do not support the <audio> element. Before HTML5, most audio files are played through a plug-in (like flash). For backward compatibility with those old browsers that do not support HTML5 audio element, we can take advantage of the old method, the flash object. Bellow code shows you how to wrap the flash object with the HTML5 audio tag.

<audio controls="controls">
<source src="example.ogg" type="audio/ogg">
<source src=" example.mp3" type="audio/mpeg">

<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="FlashVars" value="mp3= example.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3= example.mp3">
</embed>
</object>

</audio>

Note: Currently, there are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg. Some web browser may support one of these audio formats but not another, for greater compatibility, we can add more audio source reference. If the browser doesn’t support one specific format it will fallback to the next one and so forth.

Other than the default audio player, you can create your own player using JavaScript and CSS. Check out this guide for more.

, ,

Comments are currently closed.