SHARE THIS PAGE

Blog

Occasional posts on subjects including field recording, London history and literature, other websites worth looking at, articles in the press, and news of sound-related events.

16 July 2011

Moving towards HTML5 audio for your website's sounds

ADDING A SOUND player to a webpage with the HTML5 audio element should be as easy as adding a picture. Many people running sound-based blogs and websites probably won’t be too bothered though. They’re already well-served by the WordPress audio plug-in and the embeddable Soundcloud player, or even the free player from the venerable Internet Archive.

But HTML5 audio might interest the following sorts of webmaster: those who want to keep their sound files on their own server space rather than rely on third-party services, but dislike Flash player code; those who have an eye on providing content for mobile devices; and those who wish to stay abreast of technical developments.

This post compares how different browsers deal with the audio element and then looks at two Flash/HTML5 hybrid players: jPlayer and Pickle Player.

Inserting the audio element on a webpage is simple. All you need is a single line of code at the point where you want the player to appear:

<audio src="http://www.yoursite.com/mp3s/boing.mp3" controls="controls">Your browser does not support the audio element.</audio>

The controls attribute sets up the player with play and pause buttons, and a volume slider. The other available attributes are self-explanatory: preload, loop and autoplay. Here’s an example using the ‘Pub charity music box’ recording from this site. You may or may not be able to see it depending on what browser you’re using.


The line reading Your browser does not support the audio element alerts us to how some older browsers still in widespread use don’t support HTML5 audio at all. The latest version of Firefox does support it, but not for MP3s because of licensing issues. Also, variations in the size of the default audio players displayed by up-to-date browsers makes page layout more tricky.

So what at first seems like a straightforward way of including audio turns out to be hedged in by all kinds of limitations. Here are comparisons of the default players for the four most popular browsers along with some visitor stats from W3Schools.

FIREFOX

Over 42% of visitors to W3Schools in June 2011 were using Firefox, with version 4 accounting for the majority. It might seem irrelevant discussing Firefox in this context at all since it can’t do anything with MP3s, but Ogg Vorbis and Wav files will still evoke this player:


It’s 300 pixels wide and uses a moving speech-bubble shape to show the running time in minutes and seconds.

GOOGLE CHROME

The next most popular browser was Chrome and it accounted for nearly 28% of visits in June. Chrome, now into version 12, has been able to play HTML5 audio since version 3, and it can handle MP3, Ogg Vorbis and Wav formats.


To my eyes, the Chrome player is the most attractive one and, like the seldom-seen Firefox player, it’s 300 pixels across.

INTERNET EXPLORER

IE users made up around 23% of visitors, with IE8 accounting for the majority at nearly 13%. IE9 came in at just 3.6%, and it’s the only version of Explorer which can use HTML5 audio, but limited to MP3 format. Older versions of IE can be expected to hang around for a good while yet on PCs in corporate and institutional settings.


The stolid-looking native IE player is 450 pixels wide. This limits it and by extension the simple method of including HTML5 audio in general, to wide webpage columns only.

SAFARI FOR WINDOWS

Safari users amounted to under 4% of W3Schools visitors in June 2011. Safari is now into version 5 and has had HTML5 audio since version 3. I don’t own a Mac so can only show you what it looks like on Safari for Windows.


This sorry little player is 200 pixels wide and appears to lack a border on the right-most side. It looks like no more than an afterthought in a hurry.

Relying on unstyled HTML5 audio alone is out of the question for webmasters as long as Firefox doesn’t support MP3 format. You could strike out along the lonely Ogg Vorbis path instead, but that only shifts the problem onto IE9 users. So why not forget HTML5 and stick with Flash for the foreseeable?

HYBRID VIGOUR: FLASH MEETS HTML5

One reason is that if you’re building up a large stock of recordings online, then you might eventually have to shift to HTML5 audio anyway. Flash has already been around rather longer than the late and unlamented RealPlayer, but one day it will disappear. So too will the MP3 format, but there’s not much you can do about that except keep hold of all your original Wav files.

The second reason is that a small number of hybrid Flash/HTML5 players are now available which offer advantages over using either method on its own. They allow you to style the Flash and HTML5 player’s appearance at the same time using HTML and CSS alone. The players can switch from displaying one mode to the other depending on the browser’s capabilities. This sidesteps both the browser limitations outlined above and the need to use Flash authoring software.

jPlayer is a free, open-source jQuery plug-in. The Quick Start guide is the best place to begin reading, along with studying the source code for the audio player demo page. Once you’ve uploaded the required Javascript and Flash files to your web server, and linked to the jQuery library, most of the effort is likely to involve designing your own customised player skin with CSS. The downloadable Blue Monday skin gives you something to work with.

Pickle Player is a commercial plug-in that will cost UK customers just under £70 when bundled with the Skin Designer tool. It’s produced by the same firm responsible for the customisable and oddly-named Wimpy Flash player used throughout the London Sound Survey. That’s worked pretty well for me so I was encouraged to try out their newer offering. Also, it enables file path encryption, which is going to be useful for a new site section on the way soon.

Once you’ve uploaded the Flash, Javascript and other files to your server, it’s very easy to insert the player on a web page. Two lines of code need to go in the head section of the page, linking to the Javascript file and the player’s stylesheet:

<script src="http://www.yoursite.com/pickle/pickle.js" language="JavaScript"></script>

<link href="path/to/skin_name/_stylesheet.css" rel="stylesheet" type="text/css">

Then a single line of code goes in the body of the webpage where you want the player to appear:

<div data-media="http://www.yoursite.com/mp3s/boing.mp3"></div>

It’s straightforward to have multiple instances of the player on the same page, each linked to different sound files. Skin Designer uses a simple interface to add, remove and style different player elements with a colour picker, drop shadows, highlights, rounded or hard corners, and so on. It then compiles the stylesheet and associated images for you when you click the Publish button.

With all the graphics options it’s tempting to forget the design principle of ‘less is more’:


 

 

So long as you don’t alter their dimensions, you can customise the component images further in a graphics program before you upload them.

There are some limitations to Pickle Player. First, it’s not obvious how the player can be centred because it seems immune to any such specification from its parent DIV (hopefully someone reading this knows of a solution). Second, you can’t have players with different skins on the same web page without using iframes, although this isn’t an important objection. Finally, Pickle Player costs money. But ease-of-use often commands a price.

FROM VISITORS TO LISTENERS

Writing about audio players might seem of little importance when compared to what’s involved in making good recordings to begin with. A few sites still don’t even bother with audio plug-ins at all and just provide a link to the sound file, and the browser then has to start up whatever media player is available on the computer. This isn’t a very visitor-friendly approach.

If you’re running a website revolving around sound recordings, then the purpose of every element on the site should be to lead visitors towards a ‘play’ button, either directly or indirectly, and then ensure that they want to press another one after that, and then another. That’s why it’s important to devote some thought to audio players.