- o Github Star: 23.4k[1]
- o 官网[2]
Howler.js 是什么？
Howler.js 是一款基于 JavaScript 支持现代网络的音频库，默认使用 Web Audio API 兼容回退 HTML5 Audio。它提供了丰富的 API 来处理音频文件，包括播放、暂停、停止、跳转等，并且支持多种音频格式, 包括但不限于 MP3、Ogg、AAC 等。
核心概览
- o 跨浏览器兼容：支持所有主流浏览器，包括移动设备上的浏览器。
- o 简洁的 API：通过简单的 API 调用即可完成音频控制。
- o 音频缓冲：预先加载音频数据到内存，减少播放时的延迟。
- o 多格式支持：支持多种音频格式，适应不同浏览器的需求。
- o 音频剪切：使用音频剪切可以方便地处理包含多个片段的单个音频文件。
- o 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 还提供了高级功能，如音效控制、循环播放、自动缓存、淡入淡出效果等，这些功能大大增强了应用的音频处理能力。
电台播放器
音频播放器
游戏背景音
另外，推荐张鑫旭老师文章张鑫旭|基于 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