How to Set Preload to False in Howler.js

Setting the preload property to false in Howler.js is an effective way to optimize web application performance by preventing audio files from downloading automatically. This guide demonstrates how to disable automatic preloading during the initialization of a Howl object and explains how to manually trigger the audio load when it is actually needed.

By default, Howler.js has its preload property set to true (or 'metadata'), which means it immediately starts downloading audio files as soon as a new Howl instance is created. To prevent this behavior and save user bandwidth, you must explicitly set the preload option to false in your configuration object.

Code Example

Here is the standard syntax for initializing a Howler.js instance with preloading disabled:

const sound = new Howl({
  src: ['audio.mp3'],
  preload: false
});

With this configuration, the browser will not download the audio file (audio.mp3) when the script executes or when the page loads.

Loading the Audio Manually

Because the audio is not preloaded, attempting to play the sound immediately using sound.play() may result in a delay while the file fetches. To load the audio file at a later time—such as when a user hovers over a button, clicks an interface element, or navigates to a specific section of your site—you must call the .load() method:

// Trigger the download manually
sound.load();

// Play the sound once it has finished loading
sound.once('load', function(){
  sound.play();
});

Using preload: false is highly recommended for soundboards, games with numerous audio assets, or any application where users may not interact with every available audio file. This practice improves initial page load speeds and reduces mobile data consumption for your users.