Пользовательский индикатор выполнения для <audio> и <progress> элементов HTML5

Мне поражено, как разработать пользовательскую панель поиска для аудиоплеера с помощью тега и простого Javascript.

Текущий код:

    <script>
  function play() {
   document.getElementById('player').play();
  }

  function pause() {
   document.getElementById('player').pause();
  }
</script>


<audio src="sample.mp3" id="player"></audio>  
<button onClick="javascript:play()" >Play</button>
<button onClick="javascript:pause()" >Pause</button>
<progress id="seekbar"></progress>

Можно ли связать индикатор выполнения так, чтобы при воспроизведении песни был показан прогресс?

Ответ 1

Да, это возможно с помощью события timeupdate звукового тега. Вы получаете это событие каждый раз, когда положение воспроизведения обновляется. Затем вы можете обновить свой индикатор выполнения с помощью свойств currentTime и duration звукового элемента.

Вы можете увидеть рабочий пример в этом fiddle

Ответ 2

Если вы хотите гладкий индикатор выполнения, попробуйте что-то вроде этого

HTML:

<div class="hp_slide">
     <div class="hp_range"></div>
</div>

CSS

.hp_slide{
    width:100%;
    background:white;
    height:25px;
}
.hp_range{
    width:0;
    background:black;
    height:25px;
}

JS:

var player = document.getElementById('player');    
player.addEventListener("timeupdate", function() {
    var currentTime = player.currentTime;
    var duration = player.duration;
    $('.hp_range').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
});

Довольно грубая, но работает

Ответ 3

Прежде всего, не используйте элемент progress, это дерьмовый элемент (на данный момент) и стиль, это огромная боль... ну, это скучно (посмотрите на небольшой проект, который я сделал, посмотреть на него (и это juste webkit/moz)).

В любом случае, вы должны прочитать документ MDN, это очень просто и с большим количеством примеров. То, что вы ищете, это атрибут currentTime, здесь небольшой фрагмент:

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

Итак, вам нужно использовать кросс-умножение (div - это элемент, который вы используете как индикатор выполнения): Где я нажал div | ВРЕМЯ Я ХОЧУ ЗНАТЬ

----------------------------------------
Общая длина div | Общее время моего видео/аудио (audio.seekable.end())