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) -->
<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 -->