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

您需要每次都创建一个 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();
}

请引用这个excellent blog post获取更多指导。