Индикатор выполнения: перейти к точке

Question

Я стараюсь сделать индикатор прогресса для аудио максимально простым. Я был в состоянии сделать кнопку воспроизведения и остановки, и это работает. Я смог сделать графику прогресса с помощью простой анимации. (У песни есть 30 секунд, и я оживляю 30 миллисекунд.) Теперь я застрял с этой проблемой:

Как я могу пойти куда-нибудь в песне, когда я нажимаю в этой части бара?

(Я не хочу никаких плагинов. Я стараюсь все делать сам и понимать каждый шаг)

Вот код для игры: http://jsfiddle.net/396aP/1/

HTML:

<div id="play">Play</div>
<div id="stop">Stop</div>

<div id="progressbar">
    <div id="bar">
        <div id="indicator"></div>
    </div>
</div>

<br><br>

<audio id="audio" src="http://a3.mzstatic.com/us/r1000/075/Music/35/e5/c6/mzm.pffzpdco.aac.p.m4a">
</audio>

CSS:

#play {
    position:absolute;
    left:45px; top:20px;
    cursor: pointer;
}

#stop {
    position:absolute;
    left:90px; top:20px;
    cursor: pointer;
}

#progressbar{
    position:absolute;
    width:0px;

    height:4px;
    top:50px;
    left:45px;
}

#bar{
    position:absolute;
    width:150px; height:10px;
    background-color:#999;
}

#indicator{
    position:absolute;
    width:0px; height:10px;
    background-color:#333;
}

Jquery:

$(function(){       
    $("#play").click(function() {
      $("#audio").trigger('play');
      $("#indicator").animate({"width": "150px"}, 30000);
    });

    $("#stop").click(function() {
      $("#audio").trigger('pause');
      $("#indicator").stop();
    }); 
});

Answer 1

Если ваша проблема заключается в том, что вы щелкнули мышью, попробуйте следующее:

$("#progressbar").mouseup(function(e){
    var leftOffset = e.pageX - $(this).offset().left;
    var songPercents = leftOffset / $(this).width;
    var audio = $('audio');
    audio.currentPosition = songPercents * audio.duration;
});

Я не пробовал, поэтому я не уверен, что это сработает с первой попытки, но это должно дать вам начало.