HTML5 Audio - Progress Bar

5
votes

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.

1
javascripthtmlaudiocanvas
You might want to use a canvas for that. Every audio element has a duration and current time attributes, so, you can do something like this: fillRect(posx, posy, audio.current_time/audio.duration*width, height). I forgot the exact names, but you'll get them in a few minutes of Googling. – corazza
“cannot call method addeventlistener of null” is a generic Javascript error. Use a debugger like Firefox Firebug to debug what's problem with your cose. – Mikko Ohtamaa
Can you post your code or create a fiddle? – net.uk.sweet
The error means that you are trying to add the event listener to an object that doesn't exist yet. In the microsoft example: make sure that var oAudio = document.getElementById('myaudio'); is executed before oAudio.addEventListener("timeupdate", progressBar, true);. – Duvrai

1 Answers

2
votes

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.