0

For my application, I need to pre-load numerous audio files (about 20).

I am aware that I could use a series of <audio> tags with the preload attribute, but having loads of these doesn't seem to be the most orderly approach.

Any suggestions that would enable a single audio player to be used would be gratefully received.

728883902
  • 507
  • 1
  • 4
  • 21
  • How do you plan on playing these files? Are you wanting to use a single audio tag for all of them? Also are they all the same audio, but just a different type? Or is it something like 20 different songs? – kyle Sep 20 '17 at 20:26
  • I plan to use a single audio tag. Each audio clip is different. They are short 1-2 second voice clips of a single spoken word. I plan to play them by using `$('.audioPlayer').trigger('play');` in jQuery. – 728883902 Sep 20 '17 at 20:39

1 Answers1

1

You can use fetch() and Promise.all() with .map() or a for..of loop and Promise constructor to request the media resources as Blob or ArrayBuffer and render playback at a single <audio> node using MediaSource or simply setting src of <audio> node to next Blob representation of file by passing Blob to URL.createObjectURL() to create a Blob URL.

guest271314
  • 1
  • 15
  • 104
  • 177
  • 1
    Could you add a little bit more explanation please? I've never worked with Blob, ArrayBuffer or MediaSource before. – 728883902 Sep 20 '17 at 20:40
  • @Joel See [Preload mp3 file in queue to avoid any delay in playing the next file in queue](https://stackoverflow.com/q/42049639/), [How to use Blob URL, MediaSource or other methods to play concatenated Blobs of media fragments?](https://stackoverflow.com/q/45217962/), [How to create or convert text to audio at chromium browser?](https://stackoverflow.com/q/44346410/) – guest271314 Sep 20 '17 at 20:55
  • `let mediaResources = Promise.all(["media1.ext", "media2.ext", ].map(url => fetch(url).then(response => response.blob()))).then(blobs => {console.log(blobs)//do stuff with media resources as Blobs}).catch(err => console.error(err))` – guest271314 Sep 20 '17 at 21:01