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

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 更新进度条？

How can I update a progress bar with howler js?

javascript

html

progress-bar

dom-events

howler.js