在 JavaScript 中重新启动振荡器

Question

我试图在鼠标位于画布上时使振荡器播放，不在画布上时停止。但是，使用当前代码，它在加载页面后仅工作一次，当鼠标位于画布上时第二次发生错误：

“未捕获 InvalidStateError：无法在“OscillatorNode”上执行“start”：无法多次调用 start。

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

您每次都需要创建一个 Oscillator 对象，因为 OscillatorNode 不可重用。例子：

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

请参阅这篇优秀的博客文章以获取更多指导。