javascript - HTML5 Audio - Progress Bar - Stack Overflow

admin管理员组

文章数量:1325236

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.

(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.

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./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.

• javascript
• html
• audio
• canvas

Share Improve this question Follow edited May 21, 2012 at 6:57 Botz3000 39.7k88 gold badges106106 silver badges128128 bronze badges asked May 20, 2012 at 8:54 Ammar NavidAmmar Navid 5111 gold badge11 silver badge22 bronze badges 5

• 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 Commented May 20, 2012 at 9:02
• 1 “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 Commented May 20, 2012 at 9:25
• Can you post your code or create a fiddle? – net.uk.sweet Commented May 20, 2012 at 19:32
• 1 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 Commented Feb 19, 2014 at 8:35
• Does this answer your question? Custom progress bar for <audio> and <progress> HTML5 elements – ggorlen Commented Jan 9, 2022 at 15:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

There's a progress bar example in this tutorial I wrote a while back: Working with HTML5 multimedia ponents – 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.

本文标签： javascriptHTML5 AudioProgress BarStack Overflow