html5 Audio embedding

Ok. So, here is the long awaited audio embedding post. Because html5 is still in the development/implementation stage there are a few things that are still not standardized thoroughly. Audio is one of these. As is video, but that comes in the next few weeks. What does this mean? Basically we have to jump through some hoops to make all (or, as many as possible) browsers happy.

Things that make things unhappy:
1. Embedding a .wav file – this makes your user unhappy because they have to wait for your 40mb audio file to buffer. Don’t do this. Just don’t do it.Record in wav – great, edit in wave cool, just don’t use the wav in your site.
2. Embedding only an .mp3 – this makes Firefox browsers unhappy because it won’t work correctly all the time.
3. Embedding only an .ogg – this makes chrome and safari unhappy because it won’t work correctly all the time.

So the hoop we must jump through to keep as many happy as possible is to export both an .mp3 and an .ogg of the audio story and embed both. Whichever browser in use will automatically select the one that it likes and all will be great rejoicing.

Here’s how we do that in html5 (and you must make it an html5 page for this work this way):

<!DOCTYPE HTML>     <!-- declaring this an html5 page (see previous post) -->

<meta charset=”utf-8″>
<title>Page title here!</title>

<audio controls>    <!-- html5 command, controls places the player and then you reference the audio files through <source src=”(file location)” -->
<!-- Firefox will not play mp3  -->
<source src=”(file location)” type=”audio/mp3″ />
<!-- Safari and Chrome will not play .ogg -->
<source src=”(file location)” type=”audio/ogg” />
<!-- By having both file types embedded here you cover all browsers, just like video -->



Posted on 03/14/2012, in making it work, resources, web. Bookmark the permalink. 1 Comment.

  1. cool demonstration! eventhough HTML5 audio player might not pack all of the features it works well.. it let’s iOS folk hear the mp3, tho the player will launch in a new webpage; and to return to your original page, html5 audio player

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: