Loop a Specific Section of Audio in Howler.js

This article explains how to loop a specific section of an audio file in howler.js rather than repeating the entire track from start to finish. You will learn how to use audio sprites to define the exact start time and duration of the segment you want to repeat, enabling seamless looping for background music, sound effects, or ambient noise in your web applications.

Using Audio Sprites for Localized Looping

The most efficient and built-in way to loop a specific section of an audio file in howler.js is by using audio sprites. An audio sprite allows you to define named segments of a single audio file by specifying their start time and duration in milliseconds.

When defining a sprite, howler.js allows you to pass a third boolean parameter in the sprite array to enable looping for that specific segment.

Step-by-Step Implementation

To implement a localized loop, define your Howl instance with the sprite property as shown in the example below:

// Import or reference Howler.js in your project
const sound = new Howl({
  src: ['ambient-track.mp3'],
  sprite: {
    // Define a custom sprite name
    // Format: [start_time_ms, duration_ms, loop_boolean]
    loopSection: [5000, 10000, true]
  }
});

// Play the specific looped section
sound.play('loopSection');

How the Parameters Work:

• Start Time (5000): The point in the audio file where the loop begins, measured in milliseconds (5 seconds in this case).
• Duration (10000): The length of the section you want to play, measured in milliseconds (10 seconds). The audio will play from 5000ms to 15000ms.
• Loop (true): Setting this third value to true tells howler.js to automatically rewind to the start of the sprite (5000ms) once it reaches the end of the duration (15000ms).

Controlling the Loop Programmatically

Once the sprite is defined, you can control it using standard howler.js methods.

Stopping the Loop

To stop the looping audio, call the .stop() method. You can pass the specific ID returned by the play function to stop only that instance:

const instanceId = sound.play('loopSection');

// Stop the specific loop later in your code
sound.stop(instanceId);

Changing the Loop Dynamically

If you need to turn the looping behavior on or off dynamically while the sprite is playing, use the .loop() method:

// Disable looping for the active instance
sound.loop(false, instanceId);