AudioContext.createScriptProcessor() 方法

createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels)

const myScript = document.querySelector("script");
const myPre = document.querySelector("pre");
const playButton = document.querySelector("button");

// 创建 AudioContext 与缓冲源
let audioCtx;

async function init() {
  audioCtx = new AudioContext();
  const source = audioCtx.createBufferSource();

  // 创建一个缓冲区大小（bufferSize）为 4096、
  // 单一输入和输出通道的 ScriptProcessorNode
  const scriptNode = audioCtx.createScriptProcessor(4096, 1, 1);

  // 使用 fetch() 和 decodeAudioData() 来加载音轨
  try {
    const response = await fetch("viper.ogg");
    const arrayBuffer = await response.arrayBuffer();
    source.buffer = await audioCtx.decodeAudioData(arrayBuffer);
  } catch (err) {
    console.error(
      `Unable to fetch the audio file: ${name} Error: ${err.message}`,
    );
  }

  // 向结点添加一个用于处理音频事件的函数
  scriptNode.addEventListener("audioprocess", (audioProcessingEvent) => {
    // 这里的输入缓冲区即为我们前面所加载的歌曲
    let inputBuffer = audioProcessingEvent.inputBuffer;

    // 输出缓冲区则会包含将要被修改、播放的采样
    let outputBuffer = audioProcessingEvent.outputBuffer;

    // 在输出通道间循环（在本例中，输出通道仅有一个）
    for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
      let inputData = inputBuffer.getChannelData(channel);
      let outputData = outputBuffer.getChannelData(channel);

      // 循环迭代 4096 组采样
      for (let sample = 0; sample < inputBuffer.length; sample++) {
        // 让输出等同于输入
        outputData[sample] = inputData[sample];

        // 再向其中加一些噪音
        outputData[sample] += (Math.random() * 2 - 1) * 0.1;
      }
    }
  });

  source.connect(scriptNode);
  scriptNode.connect(audioCtx.destination);
  source.start();

  // 当缓冲源停止播放的时候，断开一切的连接
  source.addEventListener("ended", () => {
    source.disconnect(scriptNode);
    scriptNode.disconnect(audioCtx.destination);
  });
}

// 连接播放按钮
playButton.addEventListener("click", () => {
  if (!audioCtx) {
    init();
  }
});