Embedding audio in your HTML5 page
|Performing Calci...||Nov 4, 2013|
|Brain anatomy sk...||May 11, 2013|
|Converting binar...||May 7, 2013|
|Online Reputatio...||May 18, 2012|
|Memcached: runni...||Mar 17, 2012|
|Embedding audio ...||Feb 17, 2012|
|Writing a time-l...||Dec 13, 2011|
|Sending SMS mess...||Aug 17, 2011|
|SVN integration ...||Jul 10, 2011|
|Writing a webcra...||Jul 3, 2011|
|Micro-optimizati...||Jul 1, 2011|
|Sending UTF-8 e-...||Jun 2, 2011|
|Work in progress...||Mar 21, 2011|
|Increasing websi...||Mar 13, 2011|
|Increasing websi...||Sep 14, 2010|
|Dear FragFrog, You..||Jan 12, 2013|
|I've taken a look ..||Mar 30, 2012|
|Another interestin..||Feb 17, 2012|
|I am also using Ap..||Jul 21, 2011|
|Yeah extension_dir..||Jul 21, 2011|
|You're sure the li..||Jul 20, 2011|
|I've downloaded se..||Jul 20, 2011|
|As someone recentl..||Mar 29, 2011|
|Thats actually qui..||Jul 19, 2010|
|Peculiar, it works..||Jul 13, 2010|
|Doesn't work with ..||Jul 12, 2010|
|Don't tell anyone,..||Jul 5, 2010|
|Yeah. "Paint" does..||Jul 5, 2010|
|Woops, fixed that,..||May 19, 2010|
|It's catEgory, not..||May 18, 2010|
Well, in theory. In practice, not so much. Maybe one day, all browsers will fully support HTML5 correctly. Till that glorious day comes, we also need to work with older browsers, and the different implementation of tags in new browsers.
The basics are fairly simple:
Code (php) (nieuw venster):
<audio controls="controls" style='width: 300px; height: 45px;'>
<source src="sound.wav" type="audio/wav" />
<source src="sound.mp3" type="audio/mpeg" />
<embed src="sound.mp3" controller="true" autoplay="false" autostart="false" type="audio/mpeg" />
You specify the controls attribute if you want your users to have a play/pause button. The size is another tricky thing: this works fine in Chrome, Firefox and Opera, but Internet Explorer seems to require a minimum size before it will properly display audio controls. A height of about 40 pixels seems to be required to get a play button. However, if you also want the sound duration and a volume slider, the height must be at least 45px. In addition, the width must be at least ~290px to display additional controls. I have no idea how this is, but setting a height of 44px or smaller only shows the play button with no additional controls - no matter how large you set the width.
Next we have the different sound source formats. This is actually pretty neat, insofar as creating more work for yourself is neat: you can specify different formats, and since not all browsers support every format, this allows for graceful degredation. Near as I can find, your common options are WAV, OGG and MP3 for audio.
Last in the list is our old embed tag. Older browsers will simply ignore the audio tag, and newer browsers will ignore anything that is not a source tag inside an audio element. This makes it ridiculously easy to still keep the embed tag for older browsers (well, IE6 and IE7 mostly). Backwards compatibility at a pinch.
Specifying content type
There is one more tricky part to all this: for this to work in IE9 and Firefox, the audio files must be linked with a specific content-type header. God knows why: Chrome and Opera do not have this requirement, but so be it. IE9 in particular is demanding on this part: MP3's must be send with audio/mpeg header. The audio/x-mpeg header will not work! Let alone a generic application/#### header. Now your average webserver will do this just fine by itself, but beware of this pitfall when you get a famous red cross instead of your audio controls.
Like this post? Then do me a favor and check out voice.fragfrog.nl for a demonstration, and study-project combined!