使用 Howler.js 时有没有办法指示音频下载进度/缓冲区？

Posted 2023-05-07

【中文标题】使用 Howler.js 时有没有办法指示音频下载进度/缓冲区？

【英文标题】：Is there a way to indicate audio download progress/buffer when using Howler.js?

【发布时间】：2016-10-12 16:17:16

【问题描述】：

我正在使用Howler.js 并试图完成这样的事情：

但是，Howler 似乎不支持audio "progress" events。有人知道我该如何解决这个问题吗？

【问题讨论】：

这个问题有解决办法吗？

【参考方案1】：

您需要绑定到 Howler 的非公共 API 来实现这一点，至少在实现此功能之前（如果有的话）。

const audio = new Howl(
  src: 'https://howlerjs.com/assets/howler.js/examples/player/audio/rave_digger.webm',
  html5: true,
  preload: false,
);

const handleLoad = () => 
  const node = audio._sounds[0]._node;
  // const node:HTMLAudioElement = (audio as any)._sounds[0]._node; // For Typescript
  node.addEventListener('progress', () => 
    const duration = audio.duration();

    // https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges#Creating_our_own_Buffering_Feedback
    if (duration > 0) 
      for (let i = 0; i < node.buffered.length; i++) 
        if (node.buffered.start(node.buffered.length - 1 - i) < node.currentTime) 
          const bufferProgress = (node.buffered.end(node.buffered.length - 1 - i) / duration) * 100;
          // do what you will with it. I.E - store.set( bufferProgress );
          break;
        
      
    
  
;

audio.on('load', handleLoad);

原答案可以在heregoldfire/howler.js中找到