Блог

У меня есть mp3-плеер, который я построил с помощью jQuery. Я следовал руководству, которое было отличным, но в проигрывателе не было очистки, только индикатор выполнения, который вы не могли изменить. В ходе исследования я нашел некоторый код для очистки, который работает нормально:

 $("#seek").bind("change", function() {
    audio.currentTime = $(this).val();
    $("#seek").attr("max", audio.duration);     
});
 

Все это прекрасно. Но ползунок не перемещается вместе со звуком во время воспроизведения. Я перепробовал много разных кодов из разных мест, но, похоже, ничего не работает. Моя последняя попытка выглядит так (это последняя строка, которая не работает):

 function showDuration(){
    $(audio).bind('timeupdate', function(){
        //Get hours and minutes
        var s = parseInt(audio.currentTime % 60);
        var m = parseInt((audio.currentTime / 60) % 60);
        //Add 0 if seconds less than 10
        if (s < 10) {
            s = '0'   s;
        }
        $('#duration').html(m   '.'   s);   
        var valueSlider = 0;
        if (audio.currentTime > 0) {
            valueSlider = Math.floor((100 / audio.duration) *     
            audio.currentTime);
        }
        $('#seek').html('value',valueSlider);
    });
}
 

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

 $('#seek').attr('value',valueSlider);
 

Мой HTML-код для ползунка выглядит следующим образом:

  <div id="tracker">
        <input id="seek" type="range" min="0" max="100" value="0"/>
        <span id="duration"></span>
     </div>
 

Я подумал, что, возможно, значения, которые я вводил для min, max, value, не позволяют jQuery динамически изменять его, но когда я ничего не добавляю, это все равно не работает.

Вы должны использовать jQuery val() в качестве установщика для изменения значения, поэтому измените это

 $('#seek').html('value',valueSlider);
 

Для

 $('#seek').val(valueSlider);