Audio in HTML5

For the reorganisation of my music website, I have decided to use the <audio> features of HTML5. This new tag allows browser-independent access and streaming of audio, without the need of a plug-in. Makes it easier for the web user to listen to music files.

There is a lot of info on the web on how to do it, so just do a search on Google. In my opinion, the most significant aspect is that it allows to use functions/methods/attributes of the audio and control it programmatically through Javascript.

This is in principle how it is done:

<audio controls="controls">
<source src="song.ogg" type="audio/ogg"></source>
<source src="song.mp3" type="audio/mpeg"></source>
Your browser does not support the audio element.
</audio>


One advantage of this HTML5 audio player method is that it shows a player interface that is built in to the browser. However, there are inconsistencies: each browser shows its own player interface. Here in the upper left of this segment is the Chrome player (as of Chrome 16).

The Microsoft Internet Explorer 9 audio player is the largest one - this fact that the players in browsers have different sizes makes it difficult to put them into resizeable web page templates; so as a consequence, the webpages will look differently on each browser, which is a major shortcoming. On the other hand, this Microsoft IE9 audio player shows also the playing time (although incorrectly for VBR-encoded MP3 files).

Apple's Safari web browser shows the smallest audio player, which is good for space-saving webpages. It also works well on the Apple iPhone - no wonder, since Apple has been pushing HTML5 for a while, as replacement for Flash.

Firefox is the browser with the most problematic support of the new HTML5 audio: first of all, it does not support MP3 files directly. On my PC, Firefox normally would play MP3 files through the Quicktime plugin. But directly playing them through the HTML5 audio player is not (yet?) supported, I guess for MP3 licensing issues. Instead, Firefox requires the files to be in the odd-ball OGG format. Is actually not so unusual, as music files on Wikipedia also are in OGG. This is because OGG is free, no licensing fee required, whereas when MP3 technology is being used, there is the threat of a law suit regarding possible licensing fees looming. This means that each file that is available as an MP3 file also needs to be there as an OGG file - double work for the web hoster. Another issue with Firefox is that it does not seem to support the methods of the audio tag: I was not able to control play(), pause(), or volume. Not really crucial at this moment, but quite strange, especially since Firefox has gone from version 4 sometime in April 2011 to version 10 now (February 2012) - the Mozilla developers must currently have different priorities.

I have not been able to get this HTML5 audio working on the new Windows Phone Internet Explorer. The visual player interface shows up, I can press the play button, but nothing happens. It might be that this has to do with a lack of support for the explicit control of the methods play(), but I have not yet done any further experiments. If Windows Phone is supposed to be second in the mobile market place by 2015, as suggested in press articles recently, then the Windows Phone developers have to go back to work and solve these issues quickly. Playing MP3s is nowadays essential for the success of a mobile phone, and HTML5 audio is the way to do it properly.

On my website I did implement a few things: first I made the sound to fade-in / fade-out, when the play/pause button is clicked. I always hate it when the sound suddenly starts or suddenly stops, and many of the commercial music distributors such as Amazon have implemented this fading, probably on their server side. Using the HTML5 for this is a bit problematic: the fading does not work very smoothly, as the volume change is apparently only applied when the next chunk of audio data is played, making the volume change a bit choppy. And when pausing it, there is a short audio gap, before I override the pause button and make it play again with a fade-out. Not very elegant, but works for now ok.

One important thing that I also have implemented is to have a more direct control over protecting the MP3 files. This would probably also work without HTML5 (I did not try), but using HTML5 gave me the opportunity to change how the MP3 files are accessed. Instead of directly putting the music filename into the src field of the audio tag, I put a link to another PHP script. In there, I read the file (hereby hiding the real filename and the location folder from the user) and stream it out. This allows to stream only a certain part of a file, which could be the first 30 seconds or a random part within the file. I also have implemented a kind of authentication scheme, which ensures that the file is accessed only through proper authorisation. This scheme is based on a "secret" calculation of a code, which needs to match a code that is associated with the MP3 file. Works fine so far, and I can even control selectively the file access. For example, those who come to my site through Facebook and have "liked" my facebook page, will get more free access to music. Hopefully this will add more fans!