5

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.

Botz3000
  • 39,020
  • 8
  • 103
  • 127
Ammar Navid
  • 51
  • 1
  • 1
  • 2
  • 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 May 20 '12 at 09: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 May 20 '12 at 09:25
  • Can you post your code or create a fiddle? – net.uk.sweet May 20 '12 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 Feb 19 '14 at 08:35
  • Does this answer your question? [Custom progress bar for – ggorlen Jan 09 '22 at 15:15

1 Answers1

2

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.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73