Howler.js提供了一個現代音頻庫,支持Web Audio API和HTML5 Audio的回退機制。該項目致力於簡化與使用JavaScript開發跨平臺音頻相關的開發工作。
Howler.js爲通過JavaScript使用音頻提供了一致的API,可以控制常見的音頻模式,包括播放、暫停、搜索速率、淡入淡出和循環播放。在可能的情況下,音頻文件會被自動緩存起來,用以提高播放性能。
<script src="/path/to/howler.js"></script>
<script>
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
</script>
或者可以利用ES模塊將Howler.js作爲依賴導入:
import {Howl, Howler} from 'howler';
const {Howl, Howler} = require('howler');
var sound = new Howl({
src: ['sound.mp3']
});
sound.play();
Howler.js提供了兩個用於處理音頻的高級構造:
- Audio Sprites——使用Sprite定義和控制音頻文件的片段,以實現精確播放,並可以使用更小的資源;
- Spatial Audio——提供立體聲聲像或3D遊戲音頻等音效。
處理音頻的一個重大挑戰是支持編碼解碼。Howler.js支持目前瀏覽器提供的14種不同形式,包括MP3、OPUS、OGG、WEBM等。
Howler.js支持所有現代Web瀏覽器,還支持Internet Explorer 9,還被用在使用Cordova基於HTML5的Facebook Instant Games平臺的的混合移動應用程序中。
衆所周知,Web Audio API的當前實現面臨着若干挑戰。規範五年多來一直在發生變化,對關鍵特性進行了幾輪的修改。最近通過AudioWorklets將音頻處理移到一個單獨的線程中,類似於Web Worker。Web Audio的瀏覽器支持仍然不一致,Howler.js可幫助開發人員避開這些問題。
最近的一個挑戰是在播放音頻剪輯之前引入用戶交互。
SitePen高級軟件工程師Paul Shannon向InfoQ分享了他有關Howler.js以及Web Audio的現狀和未來的想法:
Web Audio就像音頻方面的Canvas,提供低級別的聲音訪問。遵循這個邏輯,Howler.js之於Web Audio就像Threejs之於3D圖形。或許一旦Web Audio得到大規模採用,我們就會看到用於音頻方面的Instagram風格的過濾器出現!
幾家大型技術和媒體公司正在使用Howler.js,包括谷歌、迪士尼、Mozilla和樂高。
Howler.js具有模塊化架構,gzip壓縮後只有7KB。Howler.js基於MIT開源許可。歡迎通過Howler.js GitHub項目加入貢獻行列。