Most sensible way of preloading a batch of audio files

Question

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.

Answer 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.