Create a Customized HTML5 Audio Player
Written by Aaron Lumsden on 18 Jun 2012
My article for webdesigntuts+ this month looks at the HTML5 audio api and how you can create your own HTML5 audio player.
The Final Design
Sample from the article
Until now implementing audio into a web project has been a tedious process relying heavily on 3rd party plugins such as Flash. Since the iPhone’s notorious non acceptance of the plugin and the news that Adobe will no longer support Flash for mobile, many developers are looking at other ways to incorporate audio into their projects. This is where HTML5 audio steps in to solve the problem.
Although HTML5 provides a standard for playing audio files on the web, it is still in its infancy and still has quite a long way to go before it can provide everything that other plugins such as Flash audio provides. However, for most cases, it’s more than adequate.
The simple way to do HTML5 audio
The simplest way to implement audio into a web page using HTML5 is to use the new audio tag. Add this to your HTML5 document with the following code:
<audio controls="controls"> <source src="track.ogg" type="audio/ogg" /> <source src="track.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>
If you take a look at the code above you can see that I have declared the
Nested in the
Head on over to webdesigntuts+to read the article in full
Responsive Web Design Made Simple with Adobe Edge Reflow
A Brief History of the World Wide Web
Recreate Path’s IOS Style Navigation Using HTML, CSS3 & Jquery
