AudioContext.decodeAudioData 似乎会产生噼啪声答案

【问题标题】：AudioContext.decodeAudioData seems to create crackling noiseAudioContext.decodeAudioData 似乎会产生噼啪声
【发布时间】：2019-05-23 22:53:06
【问题描述】：

我正在创建一个电子应用程序，允许用户剪切和重新排列多个音频样本并无缝播放它们。样本的总持续时间可以长于一小时，因此我无法将它们全部解码并将它们存储为 pcm 数据。所以这就是我实现的：
- 首先解码音频ArrayBuffers，这是创建AudioBufferSourceNode的第一段所需的。
- 在播放第一个AudioBufferSourceNode 时，以同样的方式创建下一个缓冲区，并在第一个缓冲区结束后立即播放它们。

问题是，音频似乎偶尔会发出破裂的噪音。每个缓冲区都在一个接一个地播放，并且我在剪切音频的开始和结束时应用了几毫秒的衰减，所以我确定这不是来自音频的突然开始/停止。
奇怪的是，只有在音频解码异步运行时才会出现破解噪音。我已经实现了这个功能来存储最近解码的 pcm，并且从缓存播放时没有这种破裂的噪音。另外，当我在后台运行音频解码的无限循环时，音频显然有更多的裂缝。

我在 google 上搜索过此类问题，但找不到遇到同样问题的人。所以我的问题是，decodeAudioData 真的会引起爆裂声吗？如果是，我该如何解决？

这种情况在每台电脑上都会发生，但低性能的电脑似乎有更多的裂缝。

这是我用来解码的代码，它是AudioContext 的单例。

class AudioDecoder {
  // Number of audioContext of limited,
  // using a singleton to prevent hitting the limit
  private audioCtx: AudioContext;
  private static instance: AudioDecoder;
  private constructor() {
    const AudioContextClass =
      (window as any).AudioContext || (window as any).webkitAudioContext;
    this.audioCtx = new AudioContextClass();
  }
  public static decode = (arrayBuffer: ArrayBuffer) => {
    if (!AudioDecoder.instance) {
      AudioDecoder.instance = new AudioDecoder();
    }
    return new Promise<AudioBuffer>((resolve, reject) => {
      AudioDecoder.instance.audioCtx.decodeAudioData(
        arrayBuffer,
        buffer => {
          resolve(buffer);
        },
        error => reject(error),
      );
    });
  };
}

【问题讨论】：

标签： javascript typescript web-audio-api

【解决方案1】：

原则上decodeAudioData 不应该产生破裂噪音，除非原始来源有它。

但是，如果压缩音频文件的采样率与AudioContext 的采样率不同，则解码后的音频会被重新采样以匹配上下文。通常，这并不明显，但是您正在连接缓冲区以进行播放，可能存在原始文件中不存在的不连续性。您应该检查音频文件的采样率是否与上下文的速率不同。如果它们不同，请使用与上下文匹配的采样率的音频文件重试。或者使用与文件匹配的采样率构建上下文。（尚未在所有浏览器上可用。）

最后，如果这不能解决问题，请向您的浏览器提出问题，并确保包含一个简短但完整的测试用例。

【讨论】：