如何使用Web Audio API更改音频位置?

时间:2017-10-15 19:35:02

标签: javascript audio web

我试图制作各种按钮,这些按钮会在点击时改变音频文件的位置(右/左)。第一个音频“风”工作正常。它根据按下的按钮在点击和更改位置播放。然而,第二个音频“churchbells”并没有改变位置。我真的不确定这一切是如何工作的,所以我尝试更改每个东西的名称,以给它一个唯一的标识符,但它不起作用。

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

1 个答案:

答案 0 :(得分:0)

您已在right1函数中定义了函数right2play等。这意味着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.