Comment puis-je changer la position audio sur un clic avec Web Audio API?

Question

En essayant de faire divers boutons qui vont changer la position (droite/gauche) d'un fichier audio quand ils sont cliqués. Le premier "vent" audio fonctionne bien. Il joue sur le clic et change de position en fonction du bouton qui est poussé. Cependant, le second "churchbells" audio ne change pas de position. Je ne sais vraiment pas comment tout cela fonctionne, j'ai donc essayé de changer le nom de chaque chose pour lui donner un identifiant unique, mais ça ne marche pas.

<script> 
 
    
 

 
let audioContext = new AudioContext(); 
 

 
// Create a (1st-order Ambisonic) Songbird scene. 
 
let songbird = new Songbird(audioContext); 
 

 
// Send songbird's binaural output to stereo out. 
 
songbird.output.connect(audioContext.destination); 
 

 
// Set room acoustics properties. 
 
let dimensions = { 
 
    width : 4, 
 
    height : 2.5, 
 
    depth : 3 
 
}; 
 
let materials = { 
 
    left : 'plaster-rough', 
 
    right : 'plaster-rough', 
 
    front : 'plaster-rough', 
 
    back : 'plaster-rough', 
 
    down : 'plywood-panel', 
 
    up : 'plaster-rough' 
 
}; 
 
songbird.setRoomProperties(dimensions, materials); 
 

 
// Create an audio element. Feed into audio graph. 
 
let audioElement = document.createElement('audio'); 
 
audioElement.src = 'wind.ogg'; 
 

 

 
let audioElementSource = 
 
    audioContext.createMediaElementSource(audioElement); 
 

 
// Create a Source, connect desired audio input to it. 
 
let source = songbird.createSource(); 
 
audioElementSource.connect(source.input); 
 

 

 
// The source position is relative to the origin 
 
// (center of the room). 
 
source.setPosition(0.0, 8.9, 0); 
 

 
// Playback the audio. 
 
function wind() { 
 
    
 
audioElement.play(); 
 
audioElement.loop = true; 
 

 
} 
 

 

 
function right1() { 
 
source.setPosition(-0.9, 8.9, 0); 
 
} 
 
function right2() { 
 
source.setPosition(-2, 8.9, -1); 
 
} 
 
function right3() { 
 
source.setPosition(-1, 8.9, -2); 
 
} 
 
function right4() { 
 
source.setPosition(0, 8.9, -3); 
 
} 
 
function right5() { 
 
source.setPosition(1, 8.9, -2); 
 
} 
 
function right6() { 
 
source.setPosition(2, 8.9, -1); 
 
} 
 
function right7() { 
 
source.setPosition(0.9, 8.9, 0); 
 
} 
 
function right8() { 
 
source.setPosition(0, 8.9, 0); 
 
} 
 

 

 
    </script> 
 
    
 
<!-- Church Bell --> 
 
    <script> 
 

 
let audioContext1 = new AudioContext(); 
 

 
// Create a (1st-order Ambisonic) Songbird scene. 
 
let songbird1 = new Songbird(audioContext1); 
 

 
// Send songbird's binaural output to stereo out. 
 
songbird1.output.connect(audioContext1.destination); 
 

 
// Set room acoustics properties. 
 
let dimensions = { 
 
    width : 4, 
 
    height : 2.5, 
 
    depth : 3 
 
}; 
 
let materials = { 
 
    left : 'plaster-rough', 
 
    right : 'plaster-rough', 
 
    front : 'plaster-rough', 
 
    back : 'plaster-rough', 
 
    down : 'plywood-panel', 
 
    up : 'plaster-rough' 
 
}; 
 
songbird1.setRoomProperties(dimensions, materials); 
 

 
// Create an audio element. Feed into audio graph. 
 
    
 
let audioElement1 = document.createElement('audio'); 
 
audioElement1.src = 'churchbells.ogg'; 
 

 

 
let audioElementSource1 = 
 
    audioContext1.createMediaElementSource(audioElement1); 
 

 
// Create a Source, connect desired audio input to it. 
 
let source1 = songbird1.createSource(); 
 
audioElementSource1.connect(source1.input); 
 

 
// The source position is relative to the origin 
 
// (center of the room). 
 
source1.setPosition(-99, 8.9, 0); 
 
function churchbells() { 
 
// Playback the audio. 
 
audioElement1.play(); 
 
} 
 
function churchbellsright1() { 
 

 
source1.setPosition(99, 8.9, 0); 
 
} 
 

 
    </script>

<script src="https://raw.githubusercontent.com/google/songbird/master/build/songbird.js"></script> 
 

 
    <button onclick="play();">play</button> 
 

 
    <button onclick="right1();">right 1</button> 
 
    <button onclick="right2();">right 2</button> 
 
    <button onclick="right3();">right 3</button> 
 
    <button onclick="right4();">right 4</button> 
 
    <button onclick="right5();">right 5</button> 
 
    <button onclick="right6();">right 6</button> 
 
    <button onclick="right7();">right 7</button> 
 
    <button onclick="right8();">right 8</button> 
 
    <button onclick="churchbellsright1();">right 8</button>

Answer 1

Vous avez défini les fonctions right1, etc right2 dans la fonction play. Cela signifie qu'ils ne seront pas disponibles pour le gestionnaire onclick. Tout ce qui est défini dans une fonction est uniquement disponible dans cette fonction. Vous devez donc les définir en dehors de la fonction play.

Vous devez également déclarer source en dehors de cette fonction afin que les fonctions right1 y aient accès. Essayez quelque chose comme ceci:

// declare source outside of play 
let source; 

function play() { 
    // Start of the play() code 

    // Assign songbird.createSource() to the source variable we already declared 
    source = songbird.createSource(); 
    audioElementSource.connect(source.input); 

    // The rest of the play() code 
} 

function right1() { 
    source.setPosition(-0.9, 8.9, 0); 
} 
// define right2, right3, etc here.