Pitch Shift Without Changing Speed in Howler.js

This article explains whether it is possible to adjust the pitch of an audio file without changing its playback speed using the Howler.js library. It covers the technical limitations of Howler.js regarding pitch manipulation and provides alternative solutions for developers looking to achieve independent pitch shifting in web applications.

The Short Answer: No

By default, Howler.js does not support adjusting the pitch of a sound without also changing its playback speed.

Howler.js is designed to be a lightweight wrapper for the Web Audio API. To alter the pitch of a sound, Howler.js provides the rate() method. However, this method changes the playback rate of the audio buffer. Increasing the playback rate makes the audio play faster and sound higher-pitched, while decreasing it makes the audio play slower and sound lower-pitched. This behavior is identical to speeding up or slowing down a vinyl record.

Why Howler.js Cannot Do This

To change pitch without affecting speed (known as pitch shifting), or to change speed without affecting pitch (known as time stretching), you need complex Digital Signal Processing (DSP) algorithms, such as a Phase Vocoder.

Because Howler.js focuses on simple playback control, spatial audio, and cross-browser compatibility, it does not include these heavy DSP algorithms in its codebase. This keeps the library lightweight and fast.

Alternative Solutions

If your project requires independent control over pitch and speed, you will need to look beyond standard Howler.js.

1. Use Tone.js

Tone.js is a web audio framework designed for creating interactive music in the browser. Unlike Howler.js, Tone.js has built-in effects nodes for advanced audio manipulation. You can use the Tone.PitchShift node to alter the pitch of an audio source in semitones without affecting its playback duration.

2. Implement Web Audio API AudioWorklets

If you want to keep using Howler.js for general playback but need custom pitch-shifting, you can route Howler’s audio output through a custom Web Audio API node. By using an AudioWorklet, you can write or import a JavaScript-based pitch-shifting algorithm to process the audio buffer in real-time.

3. Pre-render the Audio Files

If the pitch adjustments do not need to happen dynamically in real-time, the most performance-efficient solution is to pre-render the audio files at different pitches using desktop audio editing software and load the specific file your application needs.