Redémarrer l'oscillateur en javascript

Question

J'essaie de faire jouer l'oscillateur lorsque la souris est sur la toile et d'arrêter quand elle ne l'est pas. Cependant, avec le code actuel, il fonctionne une fois après la page de chargement, lorsque la souris est sur la toile seconde erreur de temps:

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

Comment redémarrer l'oscillateur? Merci.

Answer 1

Vous devez créer un objet Oscillator chaque fois que les OscillatorNodes ne sont pas réutilisables. Exemple:

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

Veuillez vous reporter à ce excellent blog post pour plus d'informations.

Answer 2

Une manière plus simple est de faire démarrer et de connecter l'oscillateur à un nœud de gain que vous modulez entre 0 et 1 pour déterminer si l'oscillateur émet ou non.

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

Vous pouvez également (et doit) utiliser la montée en puissance. De plus, vous pouvez moduler davantage le gain (par exemple en fonction de la position de la souris dans le canevas) et ainsi de suite.

Oui, il faudra utiliser plus d'utilisation du processeur (puisque l'oscillateur est toujours en cours d'exécution). Cependant gagner des nœuds de valeurs à 0 trichent et ne se multiplient pas réellement, ils crachent simplement des tableaux de zéros.