Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /share/CACHEDEV1_DATA/Web/www/libraries/UBBcode/text_parser.class.php on line 228
Embedding audio in your HTML5 page

Comments Blog About Development Research Sites

Embedding audio in your HTML5 page

Feb 17, 2012
A long, long time ago, I can still remember, how the music could simply be embedded. Of course, simply using something as ghastly as an embed tag in your document would be much too easy. Therefore, we can now use the spiffy HTML5 audio tag to embed sound.

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):
1
2
3
4
5
<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" />
<
/audio>


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!

FragFrog out!

Feb 17, 2012 FragFrog

Another interesting little bit of information: in Firefox, the required height of the mediaplayer changes after / during playback, so if you give it less than 65px to work with, it will move about on your page. Fun fun :)

New comment

Your name:
Comment: