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

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事件.每次更新播放位置时都会收到此事件.然后,您可以使用audio元素的currentTime和duration属性更新进度条.

你可以在这个小提琴中看到一个有效的例子

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

这是一个简单的例子：

\n

\r\n

\r\n

const url = "https://upload.wikimedia.org/wikipedia/en/a/a9/Webern_-_Sehr_langsam.ogg";\nconst audio = new Audio(url);\nconst playBtn = document.querySelector("button");\nconst progressEl = document.querySelector(\'input[type="range"]\');\nlet mouseDownOnSlider = false;\n\naudio.addEventListener("loadeddata", () => {\n  progressEl.value = 0;\n});\naudio.addEventListener("timeupdate", () => {\n  if (!mouseDownOnSlider) {\n    progressEl.value = audio.currentTime / audio.duration * 100;\n  }\n});\naudio.addEventListener("ended", () => {\n  playBtn.textContent = "\xe2\x96\xb6\xef\xb8\x8f";\n});\n\nplayBtn.addEventListener("click", () => {\n  audio.paused ? audio.play() : audio.pause();\n  playBtn.textContent = audio.paused ? "\xe2\x96\xb6\xef\xb8\x8f" : "\xe2\x8f\xb8\xef\xb8\x8f";\n});\n\nprogressEl.addEventListener("change", () => {\n  const pct = progressEl.value / 100;\n  audio.currentTime = (audio.duration || 0) * pct;\n});\nprogressEl.addEventListener("mousedown", () => {\n  mouseDownOnSlider = true;\n});\nprogressEl.addEventListener("mouseup", () => {\n  mouseDownOnSlider = false;\n});

\r\n

button {\n  font-size: 1.5em;\n}

\r\n

<button>\xe2\x96\xb6\xef\xb8\x8f</button>\n<input type="range" value="0" min="0" max="100" step="1">

\r\n

\r\n

\r\n

\n

该方法是使用input[type="range"]滑块来反映进度并允许用户在轨道中进行搜索。当范围发生变化时，audio.currentTime使用滑块设置属性（您也可以调整max滑块的属性以匹配audio.duration）。

\n

在另一个方向上，我更新滑块在timeupdate事件触发时的进度。

\n

一种特殊情况是，如果用户用鼠标在滑块上向下滚动，该timeupdate事件将继续触发，导致进度在用户光标悬停的位置和当前音频进度之间跳跃。我使用布尔值和滑块上的mousedown/事件来防止这种情况发生。mouseup

\n\n

另请参阅JavaScript - HTML5 音频/自定义播放器的搜索栏和当前时间，以获取显示时间的此代码的扩展。

\n