使用 Web Audio API 将节点相互连接

Question

我正在尝试用我的音频做几件事：

• 增加/减少音频的整体音量。
• 增加/减少特定通道的音量和延迟（左）。

我有这个代码：

var audioContext = window.AudioContext || window.webkitAudioContext,
    context = new audioContext(),
    sourceNode = context.createMediaElementSource(document.getElementById('audio'));

// Nodes to control the left channel
var channelSplitterNode = context.createChannelSplitter(1);

var leftChannelGainNode = context.createGain();
leftChannelGainNode.gain.value = 1.10;
channelSplitterNode.connect(leftChannelGainNode, 0);

var leftChannelDelayNode = context.createDelay();
leftChannelDelayNode.delayTime.value = 0.10;
channelSplitterNode.connect(leftChannelDelayNode, 0);

// Node to control the track's overall volume
var volumeGainNode = context.createGain();

// I think this might be where I mess up
sourceNode.connect(leftChannelGainNode);
sourceNode.connect(leftChannelDelayNode);
sourceNode.connect(volumeGainNode);
volumeGainNode.connect(context.destination);

// Change gain at any time like so 
// volumeGainNode.gain.value = 1.50;
// leftChannelDelayNode.delayTime.value = 1.50;
// leftChannelGainNode.gain.value = 2.00;

应该如何建立联系以实现我的目标？

现场演示：https : //jsfiddle.net/Lvvozsot/183/

Answer 1

You need to connect the nodes as a chain; think of it as a concept of patch cables.

您还需要一个合并节点来合并拆分通道（有关其用法，请参见此示例）。

因此，连接列表将是：

• 来源 ？分路器节点
• 左声道？增益节点
• 增益节点 ? 延迟节点
• 延迟节点+右声道？合并节点
• 合并节点 ? 输出

以图形形式：

更新添加技术细节（从 Dan P. 的小提琴更新）：

使用代码的链将是：

// nodes
sourceNode = context.createMediaElementSource(audioPlayer);
splitter = context.createChannelSplitter(2);
gainL = context.createGain();
delayL = context.createDelay();
merger = context.createChannelMerger(2);
gainGeneral = context.createGain();        

// source to splitter
sourceNode.connect(splitter);

// left channel to gain
splitter.connect(gainL, 0);

// gain to delay
gainL.connect(delayL);

// delay to merger
delayL.connect(merger, 0, 0);

// remeber right channel to merger here:
splitter.connect(merger, 1, 1);

// merged signal to common gain node
merger.connect(gainGeneral);

// gain to output
gainGeneral.connect(context.destination);

演示：

// nodes
sourceNode = context.createMediaElementSource(audioPlayer);
splitter = context.createChannelSplitter(2);
gainL = context.createGain();
delayL = context.createDelay();
merger = context.createChannelMerger(2);
gainGeneral = context.createGain();        

// source to splitter
sourceNode.connect(splitter);

// left channel to gain
splitter.connect(gainL, 0);

// gain to delay
gainL.connect(delayL);

// delay to merger
delayL.connect(merger, 0, 0);

// remeber right channel to merger here:
splitter.connect(merger, 1, 1);

// merged signal to common gain node
merger.connect(gainGeneral);

// gain to output
gainGeneral.connect(context.destination);

var gainL, delayL, gainGeneral, merger, splitter, context, sourceNode, audioPlayer;
audioPlayer = $('#audioPlayer')[0];
$('#play').on('click', function(){audioPlayer.play();});

context = new (window.AudioContext || window.webkitAudioContext)();

// nodes
sourceNode = context.createMediaElementSource(audioPlayer);
splitter = context.createChannelSplitter(2);
gainL = context.createGain();
delayL = context.createDelay();
merger = context.createChannelMerger(2);
gainGeneral = context.createGain();        

// source to splitter
sourceNode.connect(splitter);

// left channel to gain
splitter.connect(gainL, 0);

// gain to delay
gainL.connect(delayL);

// delay to merger
delayL.connect(merger, 0, 0);

// remeber right channel to merger here:
splitter.connect(merger, 1, 1);

// merged signal to common gain node
merger.connect(gainGeneral);

// gain to output
gainGeneral.connect(context.destination);

$('.adjust-stereo-btn').on('click', function () {
	var action = $(this).data('action');

  switch (action) {
    case 'normal':
      gainL.gain.value = 1.00;
      delayL.delayTime.value = 0.00;
      break;
    case 'wide':
      // I recommend values <10ms as above our brain is able to separate the signal.
      // Delays may cause phase issues too (if using loudspeakers)
      gainL.gain.value = 1.0;  // set to 1 for this demo
      delayL.delayTime.value = 5/1000;
      break;
    case 'wider':
      gainL.gain.value = 1.0;
      delayL.delayTime.value = 10/1000;
      break;
  }
});

$('.adjust-volume-btn').on('click', function () {
	var action = $(this).data('action');
  switch (action) {
    case 'normal':
      gainGeneral.gain.value = 1.00;
      break;
    case 'loud':
      gainGeneral.gain.value = 2.00;
      break;
    case 'louder':
      gainGeneral.gain.value = 3.00;
      break;
  }
});