<的自定义进度条;音频>并且<进度>HTML5元素

Custom progress bar for <audio> and <progress> HTML5 elements

本文关键字：lt gt 并且 元素 HTML5 进度 自定义 音频      更新时间：2023-09-26

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

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

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

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

如果你想要流畅的进度条，可以试试

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

相当粗糙，但工作

这里有一个简单的香草示例：

const url = "https://upload.wikimedia.org/wikipedia/en/a/a9/Webern_-_Sehr_langsam.ogg";
const audio = new Audio(url);
const playBtn = document.querySelector("button");
const progressEl = document.querySelector('input[type="range"]');
let mouseDownOnSlider = false;
audio.addEventListener("loadeddata", () => {
  progressEl.value = 0;
});
audio.addEventListener("timeupdate", () => {
  if (!mouseDownOnSlider) {
    progressEl.value = audio.currentTime / audio.duration * 100;
  }
});
audio.addEventListener("ended", () => {
  playBtn.textContent = "▶️";
});
playBtn.addEventListener("click", () => {
  audio.paused ? audio.play() : audio.pause();
  playBtn.textContent = audio.paused ? "▶️" : "⏸️";
});
progressEl.addEventListener("change", () => {
  const pct = progressEl.value / 100;
  audio.currentTime = (audio.duration || 0) * pct;
});
progressEl.addEventListener("mousedown", () => {
  mouseDownOnSlider = true;
});
progressEl.addEventListener("mouseup", () => {
  mouseDownOnSlider = false;
});
button {
  font-size: 1.5em;
}
<button>▶️</button>
<input type="range" value="0" min="0" max="100" step="1">

方法是使用input[type="range"]滑块来反映进度，并允许用户通过轨迹进行搜索。范围更改时，使用滑块作为百分比设置audio.currentTime属性（也可以调整滑块的max属性以匹配audio.duration）。

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

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

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

首先，不要使用progress元素，它是一个糟糕的元素（目前），设计它的样式是一个巨大的痛苦……嗯，它很无聊（看看我做的一个小项目，看看它（它只是webkit/moz））。

无论如何，你应该阅读关于MDN的文档，它非常简单，并且有很多例子。您要查找的是currentTime属性，这里有一个小片段：

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

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

相关文章：