Preload audio for sync with timeline

Elements Audio & Video
2

Here's a few ways to approach preloading audio:

  1. Creating a new audio element binds that potential source to the element, but unless you run a 'play' function, the URL of the audio file will not be hit. Browsers might get the metadata for the audio element (with information like that duration) but you won't have that data in memory. To 'preload' the audio you would need to play the audio element briefly and immediately pause it. This will tell the browser to start downloading it because the data is needed. So my first suggestion would be to find a way to play then pause the audio element before you need it.

  2. Add Preload=auto.

Adding this property in some browsers will start to download the file:

window.Tie_1.preload='auto';

  1. You can also detect whether the canplaythrough media event is fired. (In combination with #2 above).

The canplaythrough event is fired when the user agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.

via: HTMLMediaElement: canplaythrough event - Web APIs | MDN

This will give you confirmation that your audio is ready to roll. That would look something like this:

window.Tie_1.addEventListener( "canplaythrough", function( e ) {

  console.log( "canplaythrough fired!" );

}, false );
  1. Use a Hype audio element and check 'preload' in the resources library. We use the Web Audio API which is a bit more capable in terms of preloading audio. You can access the preloaded file by using a regular HTML audio element. See here for example.
1 Like