Question

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

＆＃34;未捕获的InvalidStateError：无法执行＆＃39; start＆＃39; on＆＃39; OscillatorNode＆＃39;：不能多次调用启动。

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以获取更多指导。

Answer 2

更简单的方法是让振荡器启动并连接到一个增益节点，在0和1之间进行调制，以确定振荡器是否输出。

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

gain.gain.value = 0;
osc.connect(ac.gain);
gain.connect(ac.destination);
osc.start();

function playosc() {
    osc.frequency.value = 440;
    gain.gain.value = 1;
}

function stoposc() {
    gain.gain.value = 0;
}

您也可以（并且应该）使用渐变。另外，您可以进一步调整增益（例如基于画布中的鼠标位置）等等。

是的，它将使用更多的CPU使用率（因为振荡器始终在运行）。然而，在0作弊时获得值的节点并且实际上不会相乘，它们只是吐出零的数组。

在javascript中重启振荡器

2 个答案: