Custom progress bar for <audio> and HTML5 elements

Question

I am mind boggled at working out how to create a custom seekbar for an audio player using the tag and simple Javascript.

Current Code:

Answer 1

First of all, don't use the progress element, it's a shitty element (for now) and styling it is a huge pain in... well it's boring (look at a little project I made, look at it (and it's juste webkit/moz)).

Anyway, you should read the doc on MDN, it's very easy and with a lot of examples. What you are looking for is the currentTime attribute, here a little snippet :

var audio = document.querySelector('#player')
audio.currentTime = 60 // will go to the 60th second

So what you need is to use the cross-multiplication (div is the element you use as a progress bar) : Where I clicked on div | THE TIME I WANT TO KNOW
————————————————————————————————————————
Total length of div | The total time of my video/audio (audio.seekable.end())