How to Preload Audio in Howler.js without Playing

This article explains how to preload audio files using the Howler.js library without triggering immediate playback. You will learn how to configure the Howl object to cache audio in the background and control exactly when the sound plays using user-triggered events.

By default, Howler.js automatically preloads audio files as soon as a new Howl object is created. To preload an audio file without playing it, you must ensure that the autoplay property is set to false (which is its default state) and that you do not call the .play() method immediately.

Here is the standard configuration to achieve this:

// Create a new Howl instance
const sound = new Howl({
  src: ['audio.mp3'],
  preload: true,   // Enables preloading (true by default)
  autoplay: false  // Prevents the audio from playing automatically
});

Checking When the Audio is Fully Loaded

Because the audio is preloaded in the background, you can listen for the load event to execute code only after the audio file has fully buffered. This is useful for enabling “Play” buttons or removing loading spinners.

sound.on('load', function(){
  console.log('Audio has preloaded and is ready to play!');
  // Enable your play button here
  document.getElementById('playButton').disabled = false;
});

Playing the Preloaded Audio

Once the audio is cached in the browser’s memory, you can trigger playback instantly in response to a user action, such as a button click, without any loading delay:

document.getElementById('playButton').addEventListener('click', function() {
  sound.play();
});

Manual Preloading (Alternative)

If you want to delay the loading process itself (for example, to save user bandwidth until they perform a specific action), you can set preload: false initially, and then call the .load() method manually later.

// Define the sound without loading it
const delayedSound = new Howl({
  src: ['audio.mp3'],
  preload: false,
  autoplay: false
});

// Trigger the preload manually at a later time
function startPreloading() {
  delayedSound.load();
}