Html5播放器定制

我正在尝试自定义音频播放器。我得到了一个控制下的按钮暂停，播放和音量，现在可以应用不同的风格。这是我的密码

 <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> 

玩
暂停
卷+
卷

现在我有一个问题，如何自定义球员的进度条。

---

有什么想法吗？

为您的音频标签注册一个

onloadedmetadata

，以获取总持续时间

持续时间

，并更新输入光滑条中的最小和最大范围

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
}

---

在线

你能写这段代码吗，因为我不知道怎么写这部分，也找不到tutorial@Pavel如果这就是你想要的，你可以接受我的回答：）