• • Github Star: 23.4k^[1]

• • 官网^[2]

Howler.js 是什么？

Howler.js 是一款基于 JavaScript 支持现代网络的音频库，默认使用 Web Audio API 兼容回退 HTML5 Audio。它提供了丰富的 API 来处理音频文件，包括播放、暂停、停止、跳转等，并且支持多种音频格式, 包括但不限于 MP3、Ogg、AAC 等。

核心概览

• • 跨浏览器兼容：支持所有主流浏览器，包括移动设备上的浏览器。

• • 简洁的 API：通过简单的 API 调用即可完成音频控制。

• • 音频缓冲：预先加载音频数据到内存，减少播放时的延迟。

• • 多格式支持：支持多种音频格式，适应不同浏览器的需求。

• • 音频剪切：使用音频剪切可以方便地处理包含多个片段的单个音频文件。

• • 3D 音频定位：通过 Web Audio API 提供的 PannerNode 实现 3D 空间音频效果。

快速开始

Howler.js 可以通过 npm 或 yarn 安装，可以通过 CDN 引入。

# npm 安装
npm install howler
# yarn 安装
yarn add howler

在项目中，引入 Howler。

// 创建一个新的Howler对象，用于音频播放
const sound = new Howl({
  // 设置音频文件的路径，支持两种格式：webm和mp3
  src: ['./audio/' + fileName + '.webm', './audio/' + fileName + '.mp3'],
  // 强制使用HTML5音频，以便能够流式传输音频（对于大文件是更好的选择）
  html5: true,
  // 自动播放
  autoplay: true,
  // 循环播放
  loop: true,
  // 声音大小
  volume: 0.5
});
// 播放音频
sound.play()

支持的事件

Howler.js 提供了丰富的事件方法，通过它们可以监听当前状态。以下是部分事件：

// 对象 Options 形式绑定事件
const sound = new Howl({
   // ...省略
  // 当音频开始播放时触发的回调函数
  onplay: () => {},
  // 当音频加载完成时触发的回调函数
  onload: () => {},
  // 当音频播放结束时触发的回调函数
  onend: () => {},
  // 当音频暂停时触发的回调函数
  onpause: () => {},
  // 当音频停止时触发的回调函数
  onstop: () => {},
  // 当音频跳转到新位置时触发的回调函数
  onseek: () => {}
});

// 通过 on 方法监听事件
sound.on('play', () => {})

使用 on 方法，多次调用添加多个事件。如果事件触发一次可以使用 once 方法，会在回调后自动删除。移除时间可以使用 off 方法。

进阶功能

Howler.js 还提供了高级功能，如音效控制、循环播放、自动缓存、淡入淡出效果等，这些功能大大增强了应用的音频处理能力。

电台播放器

音频播放器

游戏背景音

以上是示例代码回复 “demo”获取。另外，推荐张鑫旭老师文章张鑫旭|基于 Howler.js的音频播放器^[3]

总结

Howler.js 是一个功能全面、易于使用的音频处理库，它适用于各种 Web 项目的音频需求，Howler.js 提供了丰富的音效支持。通过 Howler.js 可以轻松地在 Web 上实现高质量的音频播放和控制，极大地丰富了用户的使用体验。

祝好！

引用链接

[1] Github Star: 23.4k: https://github.com/goldfire/howler.js
[2] 官网: https://howlerjs.com/
[3] 张鑫旭|基于 Howler.js的音频播放器: https://gitee.com/zhangxinxu/howlerjs-player#%E4%BB%8B%E7%BB%8D