How do I use HTML5 audio on my web site?

Unfortunately, HTML5’s support for sound is not great. They are working on it and if you just want to play some songs on your site, it won’t be a problem. But if you are building a powerful game, you’ll have to use Flash still.

Here’s the code you’ll need to use:

[prettify]

[/prettify]

You can use the boolean ‘autoplay’ (handle with care as autoplaying video might tick off your site users) as well as the ‘controls‘ to let the person scroll through the audio and play and pause it (remember both autoplay and controls are optional). The player is native to the browser and will look different depending on which browser you are viewing it in.

What formats are supported by which browsers? Check out the chart below:

chart displaying current support for audio by all major browers
chart displaying current support for audio by all major browers (http://www.findmebyip.com/litmus/)

You’re going to need to convert your .mp3 files into .ogg files and you can do that for free here.

If you need a free program to create .mp3 files, use audacity.

My other blog shows you how similar adding video with HTML5 is.

Leave a Reply

Your email address will not be published. Required fields are marked *