Howler.js:用於現代Web的音頻庫

Howler.js提供了一個現代音頻庫,支持Web Audio APIHTML5 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項目加入貢獻行列。

查看英文原文Howler.js Audio Library for the Modern Web

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章