javascript - 重新启动JavaScript中的振荡器

Question

我试图使振荡器在 Canvas 上播放时播放，而在鼠标不在 Canvas 上时停止播放。但是，使用当前代码，它在加载页面后仅工作一次，当鼠标第二次出现在 Canvas 上时，会发生错误:

"Uncaught InvalidStateError: Failed to execute 'start' on 'OscillatorNode': cannot call start more than once.

var ac = new window.AudioContext() || new window.webkitAudioContext();
var osc = ac.createOscillator();
var canvas1 = document.getElementById("canvas1");
canvas1.addEventListener("mouseover", playosc); 
canvas1.addEventListener("mouseout", stoposc); 

function playosc() {
    osc.frequency.value = 440;
    osc.connect(ac.destination);
    osc.start();
}

function stoposc() {
    osc.stop();
}

如何重启振荡器？谢谢。

Answer 1

由于OscillatorNodes不可重用，因此每次都需要创建一个Oscillator对象。例:

var canvas1 = document.getElementById("canvas1");
canvas1.addEventListener("mouseover", playosc); 
canvas1.addEventListener("mouseout", stoposc); 

var ac = new window.AudioContext() || new window.webkitAudioContext();
var osc;

function playosc() {
    osc = ac.createOscillator()
    osc.frequency.value = 440;
    osc.connect(ac.destination);
    osc.start();
}

function stoposc() {
    osc.stop();
}

请引用此 excellent blog post以获得更多指导。