digeridoo digeridoo - 5 months ago 25
Javascript Question

Restart oscillator in javascript

I'm trying to make oscillator play when mouse is on canvas and stop when it's not. However, with current code, it works just once after loading page, when mouse is on canvas second time error occurs:


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


How to restart oscillator? Thanks.

Answer

You would need to create an Oscillator object each time as the OscillatorNodes are not reusable. Example:

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

Please refer to this excellent blog post for more guidance.

Comments