Playing music and audio on websites

Playing audio online can be a tricky exercise, especially if you want the audio to play reliably across various media. If you consider all the ways people view the web such as PC's, Macs, mobile devices, and then consider all the different browsers! The simplest method, although not the best, is to use a HTML hyperlink:

<a href="http://www.example.com/audio.mp3">Play my song</a>

Try it below (you may need to press the browser 'back' arrow to get back to this page):

Play my song

When the hyperlink is pressed, the song will play if the browser has the appropriate audio plug in, otherwise it will pass it on to the operating system to play, such as Apple's Quicktime or Window's Media Player. This method works but there is no control over how the audio is played, no consistency in execution, and you may also lose your user as a new window or application may replace your web page. A more consistent alternative for audio is Flash as it's a ubiquitous plug-in across all browsers, and its actionscript programming language has classes designed for handling audio. Flash allows you to design movies (.swf files) of any size and style, with your own icons for controlling the playing of audio. In fact the design can be limitless. The Flash programming language actionscript allows you to program simple play/stop functionality, or comprehensive features such as that of a media player.Your users will not be navigated away from your page, as the swf file is embedded into your web page. Flash has some disadvantages, such as a challenging learning curve, high CPU load, and slow page loading if there are quite a few swf files embedded on the web page. Another alternative, and arguably the best, is the new HTML5 <audio> tag. It has simplified the handling of audio on web sites, all you need in your HTML markup is:

<audio controls="controls"> <source src="http://www.example.com/audio.mp3" type="audio/mp3" /> You browser does not support the HTML5 audio tag. </audio>

The <audio> tag plays reliably on all newer browsers and has fallback if the browser does not support it. The tag provides a simple audio player with the usual controls. Try it:




If you see a red message stating 'You browser does not support the HTML5 audio tag', this is the fallback area of the <audio> tag where you insert alternative options to play the audio. If you consider that many users across the world still use Internet Explorer 7, fallback is important. A flash fallback would be the best option as most older browsers support Flash.

Enquiries: info@hairycamelwebsolutions.com.au    Level 6/69 Reservoir St, Surry Hills 2010

Hairy Camel Web Solutions ACN 153659208   ABN 87153659208 |  Sydney, Australia  |  F: 02 8084 1842  |  M: 0412 342 880
Submit a support ticket       ©2012 Copyright Hairy Camel Web Solutions Pty Ltd - Web Design Sydney       Site Map