<audio> 和 <progress> HTML5 元素的自定义进度条答案

【问题标题】：Custom progress bar for <audio> and <progress> HTML5 elements<audio> 和 <progress> HTML5 元素的自定义进度条
【发布时间】：2012-09-01 02:46:07
【问题描述】：

我对如何使用标签和简单的 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>

是否可以链接进度条，以便在我播放歌曲时显示进度？

【问题讨论】：

HTML5 和 onClick="javascript:play()" 这样的东西是一个糟糕的配对。

标签： javascript audio progress

【解决方案1】：

是的，可以使用音频标签的timeupdate 事件。每次播放位置更新时，您都会收到此事件。然后，您可以使用音频元素的currentTime 和duration 属性更新进度条。

您可以在 fiddle 中看到一个工作示例

【讨论】：

是否可以将此代码作为常规 javascript 而不是 JQuery？
它现在每 250 毫秒检查一次新时间。是否可以更快地执行此操作以使条更平滑地填充？
顺便说一句，这是不链接到 W3fools.com 的 1000 个原因之一，该链接已失效。
@ValentinKlinghammer 我已将链接更新为指向 mediaevents mdn 页面。
@Luc 查看Vladislav Filonov 下面的答案。

【解决方案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 元素，它是一个糟糕的元素（目前），并且它的样式是一个巨大的痛苦......好吧它很无聊（看看我做的一个小项目，@987654321 @（它只是 webkit/moz））。

无论如何，您应该阅读MDN 上的文档，它非常简单并且有很多示例。您正在寻找的是 currentTime 属性，这里有一点 sn-p ：

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

所以您需要使用交叉乘法（div 是您用作进度条的元素）：我在哪里点击div |我想知道的时间
——————————————————————————————————————————
div的总长度|我的视频/音频的总时间 (audio.seekable.end())

【讨论】：