자바 스크립트에서 발진기를 다시 시작하십시오.

Question

마우스가 캔버스에있을 때 발진기를 작동시키고 그렇지 않을 때 정지하려고합니다.

"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를 참조하십시오.

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 치트에서 값의 노드를 얻고 실제로 곱하지는 않지만, 그들은 단지 0의 배열을 내뱉습니다.