• ? Github Star: 23.4k^[1]

• ? 官網(wǎng)^[2]

Howler.js 是什么？

Howler.js 是一款基于 JavaScript 支持現(xiàn)代網(wǎng)絡的音頻庫，默認使用 Web Audio API 兼容回退 HTML5 Audio。它提供了豐富的 API 來處理音頻文件，包括播放、暫停、停止、跳轉等，并且支持多種音頻格式, 包括但不限于 MP3、Ogg、AAC 等。

核心概覽

• ? 跨瀏覽器兼容：支持所有主流瀏覽器，包括移動設備上的瀏覽器。

• ? 簡潔的 API：通過簡單的 API 調用即可完成音頻控制。

• ? 音頻緩沖：預先加載音頻數(shù)據(jù)到內存，減少播放時的延遲。

• ? 多格式支持：支持多種音頻格式，適應不同瀏覽器的需求。

• ? 音頻剪切：使用音頻剪切可以方便地處理包含多個片段的單個音頻文件。

• ? 3D 音頻定位：通過 Web Audio API 提供的 PannerNode 實現(xiàn) 3D 空間音頻效果。

快速開始

Howler.js 可以通過 npm 或 yarn 安裝，可以通過 CDN 引入。

# npm 安裝
npm install howler
# yarn 安裝
yarn add howler

在項目中，引入 Howler。

// 創(chuàng)建一個新的Howler對象，用于音頻播放
const sound = new Howl({
  // 設置音頻文件的路徑，支持兩種格式：webm和mp3
  src: ['./audio/' + fileName + '.webm', './audio/' + fileName + '.mp3'],
  // 強制使用HTML5音頻，以便能夠流式傳輸音頻（對于大文件是更好的選擇）
  html5: true,
  // 自動播放
  autoplay: true,
  // 循環(huán)播放
  loop: true,
  // 聲音大小
  volume: 0.5
});
// 播放音頻
sound.play()

支持的事件

Howler.js 提供了豐富的事件方法，通過它們可以監(jiān)聽當前狀態(tài)。以下是部分事件：

// 對象 Options 形式綁定事件
const sound = new Howl({
   // ...省略
  // 當音頻開始播放時觸發(fā)的回調函數(shù)
  onplay: () => {},
  // 當音頻加載完成時觸發(fā)的回調函數(shù)
  onload: () => {},
  // 當音頻播放結束時觸發(fā)的回調函數(shù)
  onend: () => {},
  // 當音頻暫停時觸發(fā)的回調函數(shù)
  onpause: () => {},
  // 當音頻停止時觸發(fā)的回調函數(shù)
  onstop: () => {},
  // 當音頻跳轉到新位置時觸發(fā)的回調函數(shù)
  onseek: () => {}
});

// 通過 on 方法監(jiān)聽事件
sound.on('play', () => {})

使用 on 方法，多次調用添加多個事件。如果事件觸發(fā)一次可以使用 once 方法，會在回調后自動刪除。移除時間可以使用 off 方法。

進階功能

Howler.js 還提供了高級功能，如音效控制、循環(huán)播放、自動緩存、淡入淡出效果等，這些功能大大增強了應用的音頻處理能力。

電臺播放器

音頻播放器

游戲背景音

以上是示例代碼回復 “demo”獲取。另外，推薦張鑫旭老師文章張鑫旭|基于 Howler.js的音頻播放器^[3]

總結

Howler.js 是一個功能全面、易于使用的音頻處理庫，它適用于各種 Web 項目的音頻需求，Howler.js 提供了豐富的音效支持。通過 Howler.js 可以輕松地在 Web 上實現(xiàn)高質量的音頻播放和控制，極大地豐富了用戶的使用體驗。

祝好！

引用鏈接

[1] Github Star: 23.4k: https://github.com/goldfire/howler.js
[2] 官網(wǎng): https://howlerjs.com/
[3] 張鑫旭|基于 Howler.js的音頻播放器: https://gitee.com/zhangxinxu/howlerjs-player#%E4%BB%8B%E7%BB%8D