Three.js音頻Audio

Three.js音頻

本文是Three.js電子書的13.1節

Threejs提供了一系列音頻相關的API：音頻Audio、位置音頻PositionalAudio、監聽者AudioListener、音頻分析器AudioAnalyser、音頻加載器AudioLoader。

音頻Audio、位置音頻PositionalAudio等Threejs類本質上是對原生Web Audio API的封裝。

非位置音頻THREE.Audio

下面的代碼案例是通過非位置音頻THREE.Audio加載一段音頻進行進行播放，該音頻播放效果不受具體位置影響，一般可以用於一個三維場景的背景音樂。

// 非位置音頻可用於不考慮位置的背景音樂
// 創建一個監聽者
var listener = new THREE.AudioListener();
// camera.add( listener );
// 創建一個非位置音頻對象  用來控制播放
var audio = new THREE.Audio(listener);
// 創建一個音頻加載器對象
var audioLoader = new THREE.AudioLoader();
// 加載音頻文件，返回一個音頻緩衝區對象作爲回調函數參數
audioLoader.load('中國人.mp3', function(AudioBuffer) {
  // console.log(AudioBuffer)
  // 音頻緩衝區對象關聯到音頻對象audio
  audio.setBuffer(AudioBuffer);
  audio.setLoop(true); //是否循環
  audio.setVolume(0.5); //音量
  // 播放緩衝區中的音頻數據
  audio.play(); //play播放、stop停止、pause暫停
});

位置音頻THREE.PositionalAudio

在實際生活中，聽到聲音的效果，受音源相對監聽者的位置和角度影響。音頻源位置發生變化，聽到的聲音有所變化，比如音量大小。Threejs提供了一個和非位置音頻THREE.Audio不同的API位置音頻THREE.PositionalAudio，通過位置音頻THREE.PositionalAudio創建的音頻播放效果可以模仿自然界中，人聽到不同位置音源的聲音效果。

可以下載Threejs視頻教程13.1節源碼(0.位置音頻PositionalAudio.html)體驗測試，通過鼠標左鍵拖動旋轉整個場景，可以體驗到音頻播放效果隨着鼠標左鍵變化而變化。因爲監聽者AudioListener綁定到了相機對象camera上，所以通過OrbitControls.js改變相機的位置或角度本質上就是改變監聽者的位置或角度，這樣的話就相當於音源綁定的網格模型audioMesh相對監聽者的位置或角度發生了變化。

...
// 用來定位音源的網格模型
var audioMesh = new THREE.Mesh(geometry, material);
// 設置網格模型的位置，相當於設置音源的位置
audioMesh.position.set(0, 0, 300);
scene.add(audioMesh);
...

// 創建一個虛擬的監聽者
var listener = new THREE.AudioListener();
// 監聽者綁定到相機對象
camera.add(listener);
// 創建一個位置音頻對象,監聽者作爲參數,音頻和監聽者關聯。
var PosAudio = new THREE.PositionalAudio(listener);
//音源綁定到一個網格模型上
audioMesh.add(PosAudio);
// 創建一個音頻加載器
var audioLoader = new THREE.AudioLoader();
// 加載音頻文件，返回一個音頻緩衝區對象作爲回調函數參數
audioLoader.load('./中國人.mp3', function(AudioBuffer) {
  // console.log(buffer);
  // 音頻緩衝區對象關聯到音頻對象audio
  PosAudio.setBuffer(AudioBuffer);
  PosAudio.setVolume(0.9); //音量
  PosAudio.setRefDistance(200); //參數值越大,聲音越大
  PosAudio.play(); //播放
});