web-audio 实时更改两个音频源

例子

本示例说明了如何使用两个音频源，以及如何基于另一个来更改它们。在这种情况下，我们将创建一个音频Ducker，如果次要轨道产生声音，它将降低主要轨道的音量。

ScriptProcessorNode将常规事件发送到其audioprocess处理程序。在链接到辅助音频源的此处理程序中，我们计算音频的“响度”，并使用它来更改主要音频源上的动态压缩器。然后将两者都发送到用户的扬声器/耳机。当在辅助音频轨道中检测到声音时，结果是主要音频轨道中的音量非常突然变化。我们可以通过使用平均值，并使用延迟线在检测到次要音频之前更改音量来使此过程更加平滑，但是在此示例中，该过程应该很清楚。

//当次要来源产生声音时，DuckingNode将严重压缩主要来源
class DuckingNode {
  constructor(context) {
    let blocksize = 2048;
    let normalThreshold = -50;
    let duckThreshold = 0.15;
  
    //创建节点
   this.compressor= context.createDynamicsCompressor();
   this.processor= context.createScriptProcessor(blocksize, 2, 2);
    
    //配置节点
    this.compressor.threshold.value = normalThreshold;
    this.compressor.knee.value = 0;
    this.compressor.ratio.value = 12;
    this.compressor.reduction.value = -20;
    this.compressor.attack.value = 0;
    this.compressor.release.value = 1.5;
    
    let self = this;
    this.processor.onaudioprocess = function(audioProcessingEvent) {
      let inputBuffer = audioProcessingEvent.inputBuffer;
      let outputBuffer = audioProcessingEvent.outputBuffer;
      let rms;
      let total = 0.0;
      let len = blocksize * outputBuffer.numberOfChannels;

      for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
        let inputData = inputBuffer.getChannelData(channel);
        let outputData = outputBuffer.getChannelData(channel);

        for (let sample = 0; sample < inputBuffer.length; sample++) {
          // 使输出等于输入
          outputData[sample] = inputData[sample];
          total += Math.abs(inputData[sample]);
        }
      }
      
      //均方根
      rms = Math.sqrt( total / len );

      //我们将阈值至少设置为“ normalThreshold”
      self.compressor.threshold.value = normalThreshold + Math.min(rms - duckThreshold, 0) * 5 * normalThreshold;
    }
  }
  
  get primaryInput () {
    return this.compressor;
  }
  
  get secondaryInput () {
    return this.processor;
  }
  
  connectPrimary(node) {
    this.compressor.connect(node);
  }
  
  connectSecondary(node) {
    this.processor.connect(node);
  }
};

let audioContext = new (window.AudioContext || window.webkitAudioContext)();

//Select two <audio> elements on the page. Ideally they have the autoplay attribute
let musicElement = document.getElementById("music");
let voiceoverElement = document.getElementById("voiceover");

//我们从它们创建源节点
let musicSourceNode = audioContext.createMediaElementSource(musicElement);
let voiceoverSourceNode = audioContext.createMediaElementSource(voiceoverElement);

let duckingNode = new DuckingNode(audioContext);

//连接一切
musicSourceNode.connect(duckingNode.primaryInput);
voiceoverSourceNode.connect(duckingNode.secondaryInput);
duckingNode.connectPrimary(audioContext.destination);
duckingNode.connectSecondary(audioContext.destination);

该示例的一部分来自Kevin Ennis的回答以及mdn上的代码。