web audio API crashing chrome

user_5797668 0
Viewed 388

I'm trying to build something using the processor node here. Almost anything I do in terms of debugging it crashes chrome. Specifically the tab. Whenever I bring up dev tools, and 100% of the time i put a breakpoint in the onaudioprocess node, the tab dies and I have to either find the chrome helper process for that tab or force quit chrome altogether to get started agin. Its basically crippled my development for the time being. Is this a known issue? Do I need to take certain precautions to prevent chrome from crashing? Are the real time aspects are the web audio api simply not debuggable?

web-audio-api google-chrome
1 Answers

Without seeing your code, it's a bit hard to diagnose the problem.

Does running this code snippet crash your browser tab?

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

function onPlay() {
  let scriptProcessor = audioCtx.createScriptProcessor(4096, 2, 2);
  scriptProcessor.onaudioprocess = onAudioProcess;
  scriptProcessor.connect(audioCtx.destination);

  let oscillator = audioCtx.createOscillator();
  oscillator.type = "sawtooth";
  oscillator.frequency.value = 220;
  oscillator.connect(scriptProcessor);
  oscillator.start();
}

function onAudioProcess(event) {
  let { inputBuffer, outputBuffer } = event;

  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];
      
      // Add white noise to oscillator.
      outputData[sample] += ((Math.random() * 2) - 1) * 0.2;

      // Un-comment the following line to crash the browser tab.
      // console.log(sample);      
    }
  }
}
<button type="button" onclick="onPlay()">Play</button>

If it crashes, there's something else in your local dev environment causing you problems, because it runs perfectly for me.

If not, then maybe you are doing a console.log() (or some other heavy operation) in your onaudioprocess event handler? Remember, this event handler processes thousands of audio samples every time it is called, so you need to be careful what you do with it. For example, try un-commenting the console.log() line in the code snippet above – your browser tab will crash.

user_87178620
Related