Articles
Audio Streaming Using HTML5
© 18th July 2010 Barry Walker
Before Flash you had to stream using .ram or .wma files, and this resulted in a lot of problems as the visitor of your website had to have the relevant audio software with compatible codecs for it to work.
That is about to change!
Whilst flash was a great replacement and only required you to have the latest Flash player software installed into your browser, this still had its drawbacks such as having to update it all the time and also that some browsers for the visually impaired could not play them.
HTML5 is about to change all that and when all the latest browsers update to include the coding everyone will be able to hear your audio no matter what software they have as the audio will play natively within the browser itself.
At the moment HTML5 audio streaming is compatible with most up to date browsers and is also compatible with the iPhone and the iPad, both of which do not support flash at the time of publishing this article.
So, how does it work?
Its simple really, all you have to use is the <audio> tag in this way:
<audio controls>
<source src="audiofile.ogg">
<source src="audiofile.mp3">
<!-- This is Where You Enter Your Flash Fall Back -->
</audio>
Notice how there are two audio files, one of them .ogg and the other .mp3. This is because some browsers will not be supporting mp3 files and some browsers will not be supporting ogg vorbis files. But, if you include both of those files it means you are supported by all browsers which use the <audio> tag. Also, the use of a flash fall back is a must so that if the browser is not HTML5 compatible it will still have an audio player to use. The word "controls" next to "audio" means that the your browsers HTML5 audio players controls will show.
Flash Fall Back
If you do not have a Flash player to fall back on, you should try the FREE WordPress Audio Player which can actually be used as a stand alone player and is used by loads of other websites, even some of the bigger record labels are using it.
All In One Option
Another way of implementing a HTML5 audio is to use jPlayer. This is a HTML5 audio player which has been created using jQuery scripting and includes a flash player as well that looks exactly the same as the HTML5 jPlayer. And best of all, it is FREE.
HTML5 audio streaming is still in its infancy, and isn't without problems. I have experienced clipping when the page is moving or if I have another browser tab opened and browsing another website. But, I'm sure as time goes by all of these problems will be ironed out.
Enjoy implementing your new HTML5 audio player.
Like or Dislike? Anything You Want To Say?
Please let us know what you think by posting a comment about it.
No login necessary.
HTML5 Audio Player Example
Here is an example of a working HTML5 audio player, this will only work in HTML5 compatible browsers.
Music: Hardcore Beatz 2009 - Euphorik Rhythm Licensed to BDWRekordings.com / CC BY-NC-SA