How can I pre-load HTML5 Media (Audio/Video) in a mobile browser?

Question

On a desktop, media generally begins loading immediately, so you can wait until the "canplaythrough" event is fired before showing the controls, if you want to.

var button = document.getElementById('play_button');
button.innerHTML = 'Loading...';
var audio = new Audio('mySound.mp4');
audio.addEventListener('canplaythrough', ()=>{
  button.innerHTML = 'Click to Play';
  button.addEventListener('click', audio.play());
});

On mobile, at least on my iPhone, nothing is automatically loaded, therefore the canplaythrough event is never fired and my controls are never shown.

How can I ensure my media is pre-loaded into memory before showing controls for a seamless UX?

Answer 1

My solution was to load the media into memory with by converting it to a DataURL.

var button = document.getElementById('play_button');
button.innerHTML = 'Loading...';
fetch(src).then(r=>r.blob()).then(blob=>{
  var reader =  new FileReader();
  reader.addEventListener("load", ()=>{
    var audio = new Audio('mySound.mp4');
    button.innerHTML = 'Click to Play';
    button.addEventListener('click', audio.play());
  });
  reader.readAsDataURL(blob);
});