使用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

您需要将节点连接为链;将其视为跳线的概念。

您还需要merger node来组合拆分渠道（请参阅this example了解其用途）。

因此，连接列表将是：

• source→splitter node
• 左声道→增益节点
• 增益节点→延迟节点
• 延迟节点+右声道→合并节点
• 合并节点→输出

以图形形式：

更新添加技术细节（从Dan P。＆＃39;小提琴更新）：

使用代码的链将是：

// 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);

演示：

＆＃13;

＆＃13;

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;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="play" style="width: 100px; height: 25px;">Play Track</button>

<div>
  <h1>Adjust Stereo Width</h1>
  <button class="adjust-stereo-btn" data-action="normal">Normal</button>
  <button class="adjust-stereo-btn" data-action="wide">Wide</button>
  <button class="adjust-stereo-btn" data-action="wider">Wider</button>
</div>

<div>
  <h1>Adjust Volume</h1>
  <button class="adjust-volume-btn" data-action="normal">Normal</button>
  <button class="adjust-volume-btn" data-action="loud">Loud</button>
  <button class="adjust-volume-btn" data-action="louder">Louder</button>
</div>

<audio crossorigin="anonymous" id="audioPlayer" src="https://www.faceflow.com/beam_me_up_mast.mp3"></audio>

＆＃13;

＆＃13;

＆＃13;