24

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

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

4

4 回答 4

35

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

您可以在这个小提琴中看到一个工作示例

于 2012-09-07T08:58:49.243 回答
12

如果您想要平滑的进度条，请尝试这样的想法

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

相当粗糙，但有效

于 2015-11-19T11:30:18.327 回答
1

首先，不要使用该progress元素，它是一个糟糕的元素（现在），并且它的样式是一个巨大的痛苦......好吧它很无聊（看看我做的一个小项目，看看它（它只是 webkit /moz))。

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

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

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

于 2012-09-07T08:42:56.667 回答
0

这是一个简单的香草示例：

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 音频/自定义播放器的搜索栏和当前时间，以了解显示时间的此代码的扩展。

于 2022-01-09T05:09:09.797 回答