如何在 Web Audio API 中动态更改播放速率答案

【问题标题】：How can I dynamically change playback rate in Web Audio API如何在 Web Audio API 中动态更改播放速率
【发布时间】：2018-07-18 13:07:50
【问题描述】：

我对 Web Audio API 很陌生，我正在尝试更改声音的播放速率，而不必停止/暂停它。目前，这段代码有效（TypeScript）：我像这样加载声音：

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);
        },
        () => { },
        () => { });

}

然后每一帧我都会像这样改变playbackRate：

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

但它远没有我想要的那么流畅，因为它会在每一帧中不断裁剪样本。

我希望声音在改变播放速率的同时连续播放，例如this engine sound。

【问题讨论】：

我不确定这是什么引擎？它没有写入 Web Audio API。你有一个完整的运行示例可以指向吗？
我们正在使用 THREE.js（因此监听器链接到相机）。我无法通过翻译 JavaScript 示例使用音频节点成功，但我认为我的解决方案就在那里。我要么需要一种方法来更快地加载声音，要么实际上在它停止的地方恢复声音。
嗯。看起来 THREE.js 并没有直接暴露底层的网络音频位，这是一种耻辱。但是你真的需要暂停（）和播放（）来改变播放率吗？ Web Audio 可让您在播放源时更改播放速率，快速查看 THREE.js 代码 (github.com/mrdoob/three.js/blob/master/src/audio/Audio.js#L223) 表示它也会实时更改。（您不能顺利设置它，例如 setTargetAtTime() 设置播放速率，但这应该仍然可以很好地工作）。
我找到了解决方案：我不得不使用 this.engineLoop.setPlaybackRate((2/4700)*(rpm-800)+1);它奏效了！

标签： typescript audio web web-audio-api

【解决方案1】：

您可以为此使用SoundTouchJS。文档有点参差不齐，因此您必须查看源代码，但是您可以调整一个“速率”属性，该属性会减慢/加快音频源节点的播放速率。在您的 ui 中提供一个滑块或其他内容，并将其值附加到 onChange 事件中的“rate”属性。

【讨论】：

【解决方案2】：

ThreeJS 文档包含：Audio.setPlaybackRate()，这正是您所需要的！

（而且它非常流畅，我刚刚测试过的东西我听不到剪辑）

【讨论】：