重新安排时的音频节点无缝回放保障？

Question

当我播放音频与AudioBufferSourceNode，可我没有任何间隙之前（增益或声像或其他可能的节点）添加其他节点或在播放跳跃？这是在规范中提到的地方？有人对这个有经验么？

// Play audio
var source = context.createBufferSource();
source.buffer = someBuffer;
source.connect(context.destination);
source.start();

// Later, when source is still playing, is this safe?
source.disconnect();
source.connect(gain);
gain.connect(context.destination);

// And removing nodes is safe too?
gain.disconnect();
source.disconnect();
source.connect(context.destination);

我知道，因为我希望我能重新安排节点，但我的问题是关于实际播放过程中重新排列。

Answer 1

我没有检查了规范，但是从测试，实现根本的不同呢？

当完全断开Chrome和Safari浏览器将暂停AudioBufferSourceNode的播放，而Firefox将保持运行。

const ctx = new(window.AudioContext || window.webkitAudioContext);
let source;
let connected = true;

btn.onclick = e => {
  btn.textContent = 'loading...';
  btn.disabled = true;
  fetch('https://upload.wikimedia.org/wikipedia/commons/2/23/Turdus_fuscater_-_Great_Thrush_XC243229.mp3')
    .then(r => r.arrayBuffer())
    .then(buf => ctx.decodeAudioData(buf))
    .then(audioBuf => {
      source = ctx.createBufferSource();
      source.buffer = audioBuf;
      source.onended = e => console.log('done');
      source.connect(ctx.destination);
      btn.onclick = e => {
        source.start(0);
        btn.onclick = switchConnect;
        btn.textContent = 'switch connection';
      };
      btn.textContent = 'play';
      btn.disabled = false;
    });
};

function switchConnect() {
  if (connected)
    source.disconnect();
  else
    source.connect(ctx.destination);
  connected = !connected;
}

<script src="https://cdn.jsdelivr.net/gh/mohayonao/promise-decode-audio-data@eb4b1322113b08614634559bc12e6a8163b9cf0c/build/promise-decode-audio-data.min.js"></script>
<button id="btn">fetch</button>

现在，即使播放不会暂停，你可以遇到一些杂音。这就是为什么即使AudioNode.disconnect() has been extended to allow for a destination parameter的原因，这使我们能够从中目的地，我们要断开微调，而不是从任何地方断开。

所以这样做，你可以简单地首先连接您的节点到新的目标，然后从以前的断开。这应该摆脱明显的杂音，而在播放WebKit的停顿。

但是，请注意，所有的浏览器仍然不支持该选项，从我测试的，Chrome和Firefox做，Safari浏览器没有。因为在非支持的浏览器调用disconnect(destination)实际上将其所有目的地断开连接，我们在我们的代码来处理这两种情况。

let supportFineDisconnect = false;
const ctx = new(window.AudioContext || window.webkitAudioContext);
const osc = ctx.createOscillator();
const gain = ctx.createGain();

// lazy checks support for AudioNode.disconnect(destination)
try {
  osc.disconnect(osc);
} catch (e) {
  supportFineDisconnect = "maybe";
}

btn1.onclick = begin;
onchange = switchRoute;

function begin(){
  osc.connect(gain);
  gain.connect(ctx.destination);
  gain.gain.value = 1;

  osc.start(0);

  btn1.textContent = 'stop';
  btn1.onclick = e => osc.stop(0);
}

function switchRoute() {
  if (!supportFineDisconnect) { // might click
    osc.disconnect(); // disconnect from all
  }
  if (+document.querySelector('input:checked').value) {
    connectDirect();
  } else {
    connectGain();
  }
}

function connectDirect() {
  // first connect to new dest
  osc.connect(ctx.destination);
  if (supportFineDisconnect) {
    osc.disconnect(gain); // then disconnect only from gain
  }
}

function connectGain() {
  // first connect to new dest
  osc.connect(gain);
  if (supportFineDisconnect) {
    osc.disconnect(ctx.destination); // then disconnect only from main
  }
}

<button id="btn1">start playing a 440hz osc</button>
switch: <input type="radio" checked value="0" name="switch"><label>through gain</label>
<input type="radio" value="1" name="switch"><label>direct</label>

但当然，这仍然不能阻止由其他因素引起的点击或持久性有机污染物（如增益或他人的变化等）。