Audio Progress Bar html5 with interaction

Question

Hey i need creat a simple player in html 5, i create de control, play, pause,

but i need a progress bar with interation

this example is a interarion bar, but i need click and this move to music time

http://jsfiddle.net/LQqGS/3/

 $('.clickable').bind('click', function (ev) {
                var $div = $(ev.target);
                var $display = $div.find('.display');

                var offset = $div.offset();
                var x = ev.clientX - offset.left;

                $('.progress').width(x);
            });

            $("#pause").click(function() {
                audioElement.pause();
            });

Answer 1

You already did most of the work. What you need to do now is to change the currentTime value for your audio player. It's a value in seconds.

Since you already have the X position of your click, you can divide that by the width of your progress bar to get the percentage of the song that should be played.

You have the duration property for the audio element, which returns the length of the currently playing audio file, in seconds.

var duration = player.duration;
var ratio = X / progressBar.width(); 
var newCurrentTime = ratio * duration.
player.currentTime = newCurrentTime;

That's just a quick example, replace the variable names with their appropriate values.

Let's say that your progress bar is exactly 100px wide, and that you are calculating that the click occured at 50px, the ratio would be 50/100, so 0.5. Multiply that by the total duration of the audio track, and you will get the new duration to set.