CODEWITHSUNDEEP
typescriptaudiowebweb-audio-api
Thierry Dubois
Thierry Dubois

Reputation: 31

How can I dynamically change playback rate in Web Audio API

I'm quite new to the Web Audio API and I'm trying to change the playback rate of a sound without having to stop/ pause it. Currently, this piece of code works (TypeScript): I load the sound like this:

private init(): void {
    const tmpLoop: Audio = this.engineLoop = new Audio(this.cameraManager.listener);
    const idleLoader: AudioLoader = new AudioLoader();
    idleLoader.load("../../assets/sounds/engine.ogg",
        (buffer: AudioBuffer) => {
            tmpLoop.setBuffer(buffer);
            tmpLoop.setLoop(true);
            tmpLoop.setVolume(0.5);
        },
        () => { },
        () => { });

}

And then every frame I change playbackRate like this:

public modifyPlayBackSpeed(rpm: number): void {
    if(rpm > 800)
    {
        this.engineLoop.pause();
        this.engineLoop.playbackRate = (2/4700)*(rpm-800)+1;
        this.engineLoop.play();
    }

But it's nowhere near as fluid as I would like, since it keeps clipping the sample every frame.

I would like the sound to play continuously while changing playback rate, like this engine sound.

Upvotes: 3

Views: 2077

Answers (2)

WiMantis
WiMantis

Reputation: 396

The ThreeJS doc contains : Audio.setPlaybackRate() , which does exactly what you need !

(and it's pretty smooth, I ear no clipping from what I just tested)

Upvotes: 1

Steve -Cutter- Blades
Steve -Cutter- Blades

Reputation: 5432

You can use SoundTouchJS for this. Documentation is a little spotty, so you'll have to look at the source, but there's a 'rate' property you can adjust that will slow/speedup the playback rate of your audio source node. Provide a slider or something in your ui and attach it's value to the 'rate' property in an onChange event.

Upvotes: 1

Related Questions