Настройка html5 плеера

Question

Я пытаюсь настроить аудиоплеер. У меня есть контроль под кнопками PAUSE, PLAY и VOLUME, теперь можно применять разные стили. Вот мой код

<audio controls id=aud> 
    <source src="horse.mp3" type="audio/mpeg"> 
    </audio> 
    <button class='btn btn-default' onclick="document.getElementById('aud').play()">Play</button> 
    <button class='btn btn-default' onclick="document.getElementById('aud').pause()">Pause</button> 
    <button class='btn btn-default' onclick="document.getElementById('aud').volume += 0.1">Vol+ </button> 
    <button class='btn btn-default' onclick="document.getElementById('aud').volume -= 0.1">Vol- </button> 
    <input type="range" class='btn btn-default' onclick="document.getElementById('aud').seekable()"></input> 

Теперь у меня возникли проблемы с настройкой полосы хода игрока. Любые идеи?

Answer 1

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

aud.onloadedmetadata = function(){ 
audioRange.max = aud.duration; 
console.log('Current audio duration: ',aud.duration); 
} 
aud.ontimeupdate = function(){ 
    audioRange.value = aud.currentTime 
} 
audioRange.onclick = function(e){ 
    aud.currentTime = audioRange.value 
} 

Интернет demo