Until HTML5 came along there was no standard for playing audio on a web page.

Most audio was played using browser plugins like QuickTime Player and Adobe Flash. The problem is that these have to be installed by the user and not everybody wants to, or is able to do this.

HTML5 specifies a standard way to get audio to play natively in the browser with the audio element. Using this element, both sound files and streaming audio can be played in the browser.

This code in an HTML Snippet will play audio in Safari and Google Chrome.

HTML5 Audio Tag

<audio src=”http://www.domain.com/FolderName/SongTitle.mp3” controls=”controls”>

</audio>

Firefox and Opera don’t support MP3 or MP4 at this time so they need an OGG file which you can create in Audacity or QuickTime Pro.

<audio controls=”controls” autoplay=”autoplay” loop=”loop” preload="preload">

<source src=URL to songfile.ogg type=”audio/ogg” />

<source src=URL to songfile.mp4 type=”audio/mpeg” />

</audio>

Controls, autoplay, loop and preload can be set to "none" if required.

This player has "controls" but no autoplay or loop.

Preload is set to "none" to speed page download time in the browser.

This, of course, is not the whole story. Each browser displays its own unique player which it generates in response to the “controls” function. To make one size fit all, the snippet has to be adjusted and, for the iPad and iPhone, the code has to be modified slightly.

Unless you own the copyrights on a musical composition, you need to obtain a license to play it on your website.

These are explained here -  http://www.iwebformusicians.com/DistributeandPromote/CopyrightPublishing.html

The institutions who protect and manage these copyrights have big bucks to sue offenders. You have been warned!

© Roddy McKay 2011- All Rights Reserved

Next Page

The song title and artist's name are added inside the snippet using HTML to use up the otherwise wasted space required by the popup volume control.