Question

如何在音频播放时使用howler js并更新进度条？

我认为我使用的是pos或seek，但我似乎无法让它发挥作用。

我可以创建一个on事件监听器，以便在每次更改位置时进行更改吗？

进度条HTML：

<progress id="progress_bar" value="0.0" max="1.0" style="-webkit-appearance: none; appearance: none; height: 48px; float: left;"></progress>

咆哮js：

on ('update_progress', function() {
    document.getElementById('progress_bar').value = audio.pos();
}),

然后，如果按下进度条，如何更新音频的位置。我认为在这种情况下使用输入范围实际上可能会更好。

Answer 1

howler.js目前没有进展事件，但可能会在以后添加。但是，您可以随时（在2.0上）或audio.seek()在1.0上调用audio.pos()来获取当前位置。然后，您可以在requestAnimationFrame（这是2.0演示使用的内容）或setInterval中调用此内容来更新您的进度条。

Answer 2

您可以使用以下代码段

setInterval(() => {
  updateWidth(); 
},300);

function updateWidth() {
  if (sound.playing()) {
    let width = (sound.seek()/sound.duration())/100;
  }
}

如何使用howler js更新进度条？

2 个答案: