Embedding audio

Roger Pack edited this page Nov 4, 2015 · 2 revisions
Clone this wiki locally

Embedding audio

You can embed audio into your page using the following code.

<audio src="audio.mp3" controls preload></audio>

Providing an open-source alternative

The above code snippet will work in every major browser. However, many open-source browsers do no recognise MP3 files, and so will be forced to use a Flash plugin rather than their native player. To allow as many people as possible to use their native HTML5 player, it's a good idea to provide another version of your audio using an open-source codec.

To do this, simply upload your file to the excellent media.io service, and choose the OGG option. The quality setting is up to you, but higher quality files will take longer to download.

You can then link to both the MP3 and the the OGG file using the code below.

<audio controls preload> 
    <source src="audio.mp3"></source> 
    <source src="audio.ogg"></source> 

Forcing IE9 to use HTML5

Sometimes, Internet Explorer 9 will use the Flash fallback player (flowplayer), even though you want it to use the native HTML5 player. You can force IE9 to run in "edge" rendering mode, and use the native player, by adding the following meta tag to the <head> of your document.

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

Help! My audio won't play!

Audio home cinema hosting is tricky, and it's hard to get right first time. Here are a few simple troubleshooting steps to get things running smoothly.

Step 1: Check your server settings

To play correctly in Firefox, your server needs to be sending video files using the correct mimetype. To ensure that your server is playing nicely, create a file called .htaccess in the root of your site, and add the following lines:

AddType audio/mpeg .mp3
AddType audio/ogg .ogg

If you're not using Apache to serve your files, then the above settings have to be altered slightly. Instructions on how to set up mimetypes for windows servers can be found here for IIS6 and IIS7.

Step 2: Check your audio encoding

Some MP3 files are a bit weird, and won't play properly on the web. You can generally fix this by re-encoding your video with media.io using the MP3 option.

Step 3: Ask for help!

Sometimes nothing works. It's okay, the html5media project has it's own mailing list, where a friendly developer will be happy to help you out. Just send an email to html5media@googlegroups.com, and someone will get back to you as soon as possible. Or post to the mailing list via the web UI: https://groups.google.com/forum/#!forum/html5media