簡介
網頁遊戲通常會播放數十個短音效。將每個音效作為單獨的檔案載入意味著數十個請求，而且在行動裝置上，某些瀏覽器一次只允許載入一個音效。音訊精靈可以同時解決這兩個問題：一個檔案包含所有聲音，而清單檔案則記錄每個聲音的位置。
精靈通常使用需要 FFmpeg 的命令列工具來建構。 ToolBuddy 的音訊精靈創建器可以在瀏覽器中建構它們。本指南將引導您如何從零散的音訊片段建立出一個可用的 Howler.js 精靈。
精靈包包含什麼
該軟體包包含一個音訊文件，其中音訊片段按順序排列，彼此之間有短間隔，並附帶一個 JSON 清單檔案。在 Howler 清單檔案中，每個片段都有一個偏移量、以毫秒為單位的持續時間和一個循環標誌；片段名稱來自其檔案名稱。
載入並排序剪輯片段。
選擇您的音訊片段：MP3、WAV、M4A、AAC、OGG/Opus、FLAC 或 WebM 音訊。它們將按照您新增的順序顯示在「片段」卡片中。
依名稱或大小排序，或上下移動片段。控制面板標題中的「重設」按鈕會恢復您新增片段的順序。順序僅影響片段在文件中的位置；您的程式碼會按名稱播放它們。
修剪並塑形每個夾子
選擇一個片段進行預覽；其修剪功能會以控制柄的形式顯示在波形上。在控制面板中，您可以設定片段的精確起始點和結束點、增益、淡入淡出、背景音樂的循環標誌以及邊緣靜音修剪。
| 剪輯設定 | 範圍 | 為什麼 |
|---|---|---|
| 開始/結束 | 在片段內 | 去除靜音或喀嚓聲 |
| 增益 | -24 至 +24 dB | 平衡響亮和安靜的聲音 |
| 淡入/淡出 | 0 至 5 秒 | 避免邊緣喀嚓聲 |
| 循環 | 開/關 | 背景音樂與環境音 |
| 修剪靜音 | 開/關 | 去除安靜的開頭和結尾 |
設定精靈選項
選擇 Howler 清單Howler.js。設定取樣率（44.1 kHz 適合大多數遊戲；22.05 kHz 適合較小的檔案），單聲道或立體聲，片段之間的間隔（預設為 0.05 秒，因此聲音永遠不會互相串音），可選的交叉淡入淡出，以及輸出格式：MP3 或 OGG 以減小檔案大小，WAV 以方便編輯編輯。
建置、預覽、下載
選擇「建造精靈」。預覽會切換到整個精靈，每個片段都以編號的頻段顯示；單擊頻段即可選擇該片段，或切換到“片段”以單獨收聽單個聲音。
下載包含音訊的 ZIP 和 JSON，或者如果您僅更改了清單文件，則單獨下載 JSON。
在 Howler.js 中使用它
使用 `new Howl({ src: ['audio-sprite.mp3'], sprite: manifest.sprite })` 載入精靈，並使用 `sound.play('coin')` 播放聲音。如果需要相容於舊版瀏覽器，請同時提供 OGG 和 MP3 檔案；使用兩種格式建立精靈兩次。
- 保持片段名稱的唯一性：它們將成為精靈映射中的鍵。
- 保留預設間隙；它幾乎不佔用任何資源，可以避免重疊。
- 循環標誌用於背景循環，不適用於一次性特效。
可靠的偏移量
MP3 編碼器會在檔案開頭新增一個短暫的延遲，這會導致每個精靈的偏移量發生偏移。 ToolBuddy 會寫入無縫頭，告知解碼器跳過該延遲，並且其測試會解碼精靈並檢查每個片段是否從清單檔案中指定的起始位置開始。
撰寫者
Ankit Kumar
ToolBuddy 資深軟體工程師兼創辦人
使用 WebAssembly、Web Audio 和 Canvas 技術設計瀏覽器優先的實用程序，上傳要求為零。