Howler.js Rate Property Range Explained

This article provides a quick and clear overview of the rate property range in howler.js, a popular JavaScript audio library. You will learn the exact minimum and maximum playback speed limits allowed by the library, how the default value behaves, and how to implement this property dynamically in your web audio projects.

The Supported Range

In howler.js, the rate property controls the playback speed of an audio file. The standard supported range for this property is 0.5 to 4.0.

• Default Value: 1.0 (plays the audio at its normal, original speed).
• Minimum Value: 0.5 (plays the audio at half speed).
• Maximum Value: 4.0 (plays the audio at four times the normal speed).

While the underlying Web Audio API used by modern browsers can technically support a wider range of playback rates (sometimes from 0.0 up to 1024.0), howler.js limits the safe operational range to 0.5 and 4.0 to ensure consistent behavior across different browsers and when falling back to HTML5 Audio.

Changing the Pitch

It is important to note that changing the playback rate also alters the pitch of the audio. * Increasing the rate above 1.0 makes the audio faster and higher-pitched. * Decreasing the rate below 1.0 makes the audio slower and lower-pitched.

How to Use the Rate Property

You can define the playback rate when initializing a new Howl object, or change it dynamically during runtime.

Initialization Example:

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

Dynamic Change Example:

// Change the rate of a playing sound to double speed (2.0)
sound.rate(2.0);

If you pass a value outside of the supported range (such as 0.1 or 10.0), the browser or the howler.js library may clamp the value to its nearest supported limit or cause the audio to glitch depending on the rendering engine (Web Audio vs. HTML5 Audio).