如何使用Web Audio API更改点击音频位置？

Question

我试图做出各种按钮，当它们被点击时将改变音频文件的位置（右/左）。第一个音频“风”工作正常。它通过单击播放并根据按下哪个按钮来更改位置。然而，第二个音频“教堂铃声”不改变位置。我真的不确定这是如何工作的，所以我尝试改变每个事物的名称以给它一个唯一的标识符，但它不起作用。

<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

您已经定义了play函数内部的功能right1，right2等。这意味着它们将不可用于onclick处理程序。在函数中定义的任何东西只能在该函数中使用。所以你需要在play函数之外定义它们。

您还需要在该函数之外声明source，以便right1函数可以访问该函数。尝试这样的：

// 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.