Question

我很难理解如何使用标签和简单的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>

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

Answer 1

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

您可以在此fiddle

中看到一个有效的示例

Answer 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');
});

相当粗糙，但有效

Answer 3

首先，不要使用progress元素，它是一个糟糕的元素（现在）和造型它是一个巨大的痛苦...它很无聊（看看我做的一个小项目， look at it（这是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()）

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

3 个答案: