goldfire / howler.js

Javascript audio library for the modern web.
https://howlerjs.com
MIT License
23.87k stars 2.23k forks source link

add API / callbacks with current amount of the file buffered #752

Open ghost opened 7 years ago

ghost commented 7 years ago

html5 audio will buffer audio in front of the current seek position

i couldn't find any way to retrieve where the buffer extends to with howlerjs

i'd like to add a shadow in a now playing progress bar ahead of the actual progress, to indicate how much is buffered.

could we get a method and/or callbacks for this info?

remorses commented 6 years ago

Yes, Howler needs this option to be called Audio player, every audio player has buffered time. Please add this option

LavaToaster commented 6 years ago

If anyone feels like binding onto the non-public howler api for this, you can achieve it using the code below.

From my understanding you should only do this if you have HTML5 mode enabled. Additionally, the code below only works with 1 sound being played from a Howl instance.

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);
amir-saadallah commented 10 months ago

+1