How to Check if Sound is Playing in Howler.js

This article explains how to detect whether a sound is currently playing in your web application using the Howler.js library. You will learn how to check the playback status of a general sound object as well as how to target specific sound instances using unique instance IDs.

To check if a sound is playing in Howler.js, you use the built-in playing() method on your Howl instance. This method returns a boolean value (true or false) depending on the current playback state.

Checking the Entire Sound Object

If you want to know if any instance of a specific sound object is currently active and playing, call the playing() method without any arguments.

// Initialize the sound
const sound = new Howl({
  src: ['audio.mp3']
});

// Play the sound
sound.play();

// Check if the sound is playing
if (sound.playing()) {
  console.log("The sound is currently playing.");
}

Checking a Specific Sound Instance

Howler.js allows you to play the same sound multiple times simultaneously, with each playback event returning a unique instance ID. To check if a specific playback instance is currently playing, pass that instance ID as an argument to the playing() method.

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

// Start two separate instances of the sound
const instanceOne = sound.play();
const instanceTwo = sound.play();

// Pause the first instance
sound.pause(instanceOne);

// Check playback status for each specific instance
console.log(sound.playing(instanceOne)); // Returns false
console.log(sound.playing(instanceTwo)); // Returns true

Using these two approaches, you can easily manage and monitor the playback state of your audio assets in real-time.