Есть ли способ указать прогресс загрузки аудио / буфер при использовании Howler.js?

Question

Я использую Howler.js и пытаюсь сделать что-то вроде этого:

Тем не менее, похоже, что Howler не поддерживает аудио-события "progress". Кто-нибудь знает, как я мог обойти это?

Answer 1

Вам нужно будет привязаться к непубличному API Howler для достижения этого, по крайней мере, до тех пор, пока эта функция не будет реализована (если вообще когда-либо).

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

Оригинальный ответ можно найти здесь в https://github.com/goldfire/howler.js