Как создать и правильно запланировать узлы AudioBufferSource?

Question

Я пытаюсь разработать метроном, используя Javascript. Я следовал инструкциям, приведенным в этой статье, и создал планировщик, который вызывается так часто и планирует "тики", которые живут в массиве с именем ticksInQueue, Я хочу, чтобы "тики" были реальным звуком метронома, а не частотой, генерируемой осциллятором.

осциллятор

function scheduler() {
    while (nextTickTime < audioContext.currentTime + lookahead) { // while there are notes that will need to play before the next interval
      ticksInQueue.push({tick: currentTick, time: nextTickTime}); // push the note on the queue, even if we're not playing.
      //create an oscillator
      var osc = audioContext.createOscillator();
      osc.connect(audioContext.destination);
      osc.frequency.value = 440.0;
      osc.start(nextTickTime);
      osc.stop(nextTickTime + 0.1);
      nextTickTime += 60.0 / tempo;  // Add beat length to last beat time
      currentTick = currentTick + 1; // Advance the beat number, wrap to zero
      if (currentTick === 5) {
         currentTick = 0;
      }
   }
}

После этого видео урока о том, как создать AudioBufferSource узлы, я написал этот кусок кода, который выполняется при загрузке окна.

audioContext = new AudioContext();
request = new XMLHttpRequest();
request.open("GET", "tick.mp3", true);
request.responseType = "arraybuffer";
function onDecoded(buffer) {
    bufferSource = audioContext.createBufferSource();
    bufferSource.buffer = buffer;
    bufferSource.connect(audioContext.destination);
}
request.onload = function () {
    // audio data is in request.response
    audioContext.decodeAudioData(request.response, onDecoded);
};
request.send();

Однако, если я заменю осциллятор буфером, как вы видите ниже, консоль скажет мне:Uncaught InvalidStateError: Failed to execute 'start' on 'AudioBufferSourceNode': cannot call start more than once."

AudioBufferSource

function scheduler() {
    while (nextTickTime < audioContext.currentTime + lookahead) {
      ticksInQueue.push({tick: currentTick, time: nextTickTime});
      //Changed code
      bufferSource.start(nextTickTime);
      bufferSource.stop(nextTickTime + 0.1);
      nextTickTime += 60.0 / tempo;  // Add beat length to last beat time
      currentTick = currentTick + 1; // Advance the beat number, wrap to zero
      if (currentTick === 5) {
         currentTick = 0;
      }
   }
}

Answer 1

Да, вам нужно создать BufferSource для каждой "галочки". (Они совместно используют буфер, но ресурс буфера является узлом одноразового использования.)

Итак, как то так:

var the_buffer=null;

function onDecoded(buffer) {
    the_buffer=buffer;
}

function playTick() {
    if (the_buffer) {  // make sure it's been decoded
        var bufferSource = audioContext.createBufferSource();
        bufferSource.buffer = the_buffer;
        bufferSource.connect(audioContext.destination);
        bufferSource.start(0);
        // bufferSource will get auto-garbage-collected when it's done playing.
    }
}

теперь замените свой код генератора в планировщике вызовом playTick();