Clone this wiki locally
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> </audio>
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
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 email@example.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