Make an audio sprite without loading the complete song

Question

I'm using Howler JS to play songs on a website. I want just a portion of the song to be played.

Im making a sprite of each mp3 and those sprites can be played. However, it takes really long before the audio plays. It's like the whole mp3 is downloaded first and then the sprite begins, which really decrease performances and consume bandwidth. Im not familiar with Howler at all, maybe there's a method to download just the portion to be played, or if not, is there any other library/ ways to accomplish this ?

         <div
          className="playExtrait"

          onClick={() => {
            Howler.unload();
            let song = new Howl({
              src: [url],
              html5: true,
              sprite: {
                extrait: [0, 30000]
              }
            });

            let songID = song.play("extrait");
            setPlayPause("playing");
            song.fade(1, 0, 30000, songID);
            song.on("end", () => {
              setPlayPause("paused");
            });
          }}
        >

Do you have control over the media source? One approach would be to create a recording of the specific time slices of the media then request and playback that media fragment. — guest271314, Feb 10 '19 at 02:22
@guest271314 , the medias are in a firebase storage bucket. So , yes i guess.... — Barbell, Feb 10 '19 at 02:26

score 0 · Answer 1 · answered Feb 10 '19 at 02:49

You can create recordings of each specific time slices of the media by using Media Fragments URI, for example, by setting src of a <audio> element to /path/to/media#t=10,15 for playback of 10 through 15 seconds of the media resource and MediaRecorder to record the playback and save the recording as a .webm media file, where MediaRecorder is stopped at pause event of HTMLMediaElement.

See

For an example of concatenating multiple media fragments into a single recording see MediaFragmentRecorder (am the author of the code at the repository). MediaSource at Chromium/Chrome has issues when MediaRecorder is used to record a MediaSource stream, though the code should still produce the expected result at Firefox.

Make an audio sprite without loading the complete song

1 Answers1