如何使用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.