HTML5 Audio - Progress Bar

Question

I am trying to make an MP3 player in HTML5. Almost all of the work is done but what I need is that I want to replace the default controls from the <audio> tag and make my very own controls. Simple controls like play, pause, stop and volume are done but I want to make a progress bar that tracks the duration of the audio/MP3 , where when I click at the relevant position goes to the specific position on the track. Like the one in the following example.

http://msdn.microsoft.com/en-us/library/ie/gg589528(v=vs.85).aspx

The thing here is that in the above example the file/MP3 is already load and I am actually creating an audio element by using document.createElement("audio");

When I tried using different ways to change the above example I mostly get an error “cannot call method addeventlistener of null”. I want this player to run on Chrome.

Thanks in advance for your support and help.

Solution

There's a progress bar example in this tutorial I wrote a while back: Working with HTML5 multimedia components – Part 3: Custom controls . The calls etc. should be the same for a dynamically created audio element.

But yes, some code examples of what you're doing would be useful.