How to Change Playback Rate in Howler.js

This article provides a quick and clear guide on how to adjust the audio playback speed in howler.js using the library’s built-in rate() method. You will learn the correct syntax, see practical code examples, and understand how to apply playback rate changes to both global Howl instances and specific audio sprites.

The `rate()` Method

In howler.js, the playback rate is controlled using the rate() method. This method allows you to speed up or slow down audio playback.

A rate of 1.0 is normal speed, 0.5 is half speed, and 2.0 is double speed. Howler.js supports playback rates ranging from 0.5 to 4.0 (though actual behavior may vary slightly depending on browser limitations).

Syntax

sound.rate(rate, [id]);

rate (Number): The playback rate speed (e.g., 1.5 for 150% speed).
id (Number, optional): The sound ID returned from play(). If omitted, the rate change applies to all currently playing instances of the sound.

Code Examples

1. Set Playback Rate on Initialization

You can define the default playback rate when instantiating a new Howl object:

const sound = new Howl({
  src: ['audio.mp3'],
  rate: 1.5 // Starts playing at 1.5x speed
});

sound.play();

2. Change Playback Rate Dynamically

You can change the speed of the audio while it is playing:

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

sound.play();

// Change speed to 0.75x after 2 seconds
setTimeout(() => {
  sound.rate(0.75);
}, 2000);

3. Change Rate for a Specific Sound ID

If you have multiple instances of the same sound playing, you can target a single instance using its unique ID:

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

const soundId1 = sound.play();
const soundId2 = sound.play();

// Change only the first sound instance to double speed
sound.rate(2.0, soundId1);

4. Get the Current Playback Rate

If you call the rate() method without any parameters, or with only a sound ID, it returns the current playback rate:

const currentRate = sound.rate();
console.log(currentRate); // Outputs the current rate (e.g., 1)