How to Building a Custom HTML5 Audio Player with jQuery

Neutroncreations has built an HTML5 audio player for Tim Van Damme‘s The Box, a new podcast where he interviews people who make cool stuff. Tim wanted an HTML5 audio player on the site, and we put together some jQuery to hook up the player interface he designed. In this article we’ll run through the code to explain how it works, covering a few caveats along the way.

There is have a few elements for each component of the interface:

  • playtoggle is the play/pause toggle button.
  • gutter is the timeline track
  • loading is the bar indicating the loading or buffering progress
  • handle is the circular element that serves as the playhead, indicating current position
    in the audio file, and also acting as a drag handle to move to a different point of the audio
  • timeleft is the play time remaining, in minutes and seconds

They’re going to use jQuery to detect support for HTML5 audio, and if it’s supported, they will insert the audio player markup and the audio tag itself. This means that browsers that don’t have HTML5 audio support won’t see an audio player interface they can’t use. We could optionally fall back to a Flash based player.

Demo & Download : http://thebox.maxvoltar.com/
Source : http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/