Babylon.js音訊引擎是基於W3C的Web Audio規範(在網頁應用程式中處理及合成音訊的規範)。這個音訊引擎包含了環境音效(ambient)、空間音效(spatialized)和定向音效(directional)，以及音訊整合和混音。它強大但簡單好學，就如同我們前面處理畫面的步驟一樣，第一步是使用CreateAudioEngineAsync建立並初始化引擎，要注意這邊為了等他準備好再來執行音效，會使用promise，在audioEngine.unlockAsync() 之前瀏覽器會在使用者互動之前阻止音訊播放：

(async () => {
    // 初始化音效引擎
    const audioEngine = await BABYLON.CreateAudioEngineAsync();
    
    // 在這裡可以建音效了, 但還不要用撥放`play()`
    const gunshot = await BABYLON.CreateSoundAsync("gunshot",
    "sounds/gunshot.wav"
		);

    // 因為我們要等音效引擎準備好, 
    // 音效引請準備好以前, 瀏覽器會在使用者互動之前阻止音訊播放
    await audioEngine.unlockAsync();

    // 在這裡再撥放`play()`
    gunshot.play()
})();

▲ 透過playground來觀察一下以上的程式碼運作

接著來看看這三種音效：

Ambient Sounds（環境音效）

環境音效是沒有特定位置或方向的背景聲音。它們通常用於建立場景的氛圍和環境，例如風聲、雨聲、人群聲或背景音樂。

Directional Sounds（定向音效）：

定向音效是指具有特定方向的聲音。它們可以模擬聲音從特定方向發出的效果，並且可以根據收聽者的位置調整聲音的強度和方向。

Spatialized Sounds（空間音效）

WebXR中在3D空間很可能回需要用Spatial audio 空間音訊/ 沉浸式音訊/ 3D音訊/ 360音訊技術，總之就是一種讓你身歷其境的聲音技術。它需要“聽者”來聆聽音頻，並需要“聲源”來發出音頻。聽者和聲源都具有 3D 位置和方向，且聲源具有額外的設定來指定聲音在 3D 空間中的傳播方式。空間音效可以用於增強互動性，提供更真實的音訊體驗，讓使用者可以根據聲音的位置判斷物件的方向和距離。

為了方便測試空間音效，Babylon.js 提供了一個空間音訊視覺化器的playground，可以透過調整右邊參數，說是拖曳音訊的範圍來測試聽到的聲音：

控制空間聲源或聽者的位置和方向最簡單的方法是附加到Mesh上。這可以透過spatial.attach來實現：

const bounce = await BABYLON.CreateSoundAsync("bounce",
    "sounds/bounce.wav",
    { spatialEnabled: true }
);
// Tips：這邊在建立聲音時將[spatialEnabled](https://doc.babylonjs.com/typedoc/interfaces/BABYLON.IAbstractSoundOptions#spatialenabled)選項設為true。
// 是因為預設情況下底層spatial屬性未啟用，因此首次啟用時會出現短暫的延遲。
// 設定[spatialEnabled](https://doc.babylonjs.com/typedoc/interfaces/BABYLON.IAbstractSoundOptions#spatialenabled)為true可以避免這種延遲。

bounce.spatial.attach(mesh);

// Wait until audio engine is ready to play sounds.
await audioEngine.unlockAsync();

bounce.play({ loop: true });

聲音的檔案類型和格式

音訊引擎支援的聲音格式由瀏覽器決定。所有瀏覽器都支援 .mp3 和 .wav 格式，大多數瀏覽器支援 .ogg、.m4a 和 .mp4。其他格式（例如 .aac 和 .webm）則不一定瀏覽器有支援。建立聲音時，可以指定一個不同格式的聲音檔案URL 陣列，瀏覽器會使用第一個識別的格式。

Babylon.js 提供了兩種主要的聲音類型：

1. 靜態聲音 (Static Sound)

   BABYLON.CreateSoundAsync，播放前會將整個音效文件下載並記到記憶體中 (Sound Buffer)。

   適用情境： 簡短的音效、腳步聲、按鈕點擊聲（因為需要快速響應）。

2. 串流聲音 (Streaming Sound)
   BABYLON.CreateStreamingSoundAsync，會使用瀏覽器的 HTMLMediaElement 功能播放聲音。 在播放時僅將聲音檔案的一小部分保留在記憶體中，而不是事先將整個聲音下載到音訊緩衝區。

   適用情境： 長時間的音訊（如背景音樂、長時間的旁白）。

常見音效控制

循環播放 Looping playback

一般播放到聲音檔案結尾時，聲音會自動停止播放。若要使聲音在播放到最後時從頭重新開始播放，可以用loop使用以下任一方法設定聲音的設定：

方法1：

const bounce = await BABYLON.CreateSoundAsync("bounce",
    "sounds/bounce.wav",
    { loop: true }
);

bounce.play();

方法2：

const bounce = await BABYLON.CreateSoundAsync("bounce",
    "sounds/bounce.wav"
);

bounce.loop = true;
bounce.play();

方法3：

const bounce = await BABYLON.CreateSoundAsync("bounce",
    "sounds/bounce.wav"
);

bounce.play({ loop: true });

音量 Volume

聲音﹑音訊流和音訊引擎的音量，各別都可以設定。也就是可以調整單個音訊，或是一組音訊，或是音訊引擎下的所有聲音。音量設定通常是0到1，0是無聲，1是一般正常音量，大於0則是按比例增強聲音。

const audioEngine = await BABYLON.CreateAudioEngineAsync();
// 調整音訊引擎下的所有聲音
audioEngine.volume = 0.5;

const gunshot = await BABYLON.CreateSoundAsync("gunshot",
    "sounds/gunshot.wav"
);

await audioEngine.unlockAsync();
// 調整單個音訊
gunshot.volume = 0.75;
gunshot.play();