大家好,我是前端实验室的大师兄！
不知道大家有没有用过浏览器自带的音频播放，从 Chrome 71 开始限制audio自动播放，目前safari、firefox、edge等浏览器都在某版本后限制了audio自动播放功能，必须要用户与当前页面有交互后，才能激活自动播放，否则就会报错。原生的播放器，功能不够强大，而且会有一些局限性就会导致无法实现我们的功能
今天大师兄就给大家介绍一款优秀的音频库howler.js
howler.js
howler.js是现代网络的音频库。它默认为Web Audio API并回退到HTML5 Audio。这使得在所有平台上使用 JavaScript 处理音频变得容易且可靠。
特点
howler.js不仅有诸多特点，而且还兼容了许多旧版本
- 满足所有音频需求的单一 API
- 默认为 Web 音频 API 并回退到 HTML5 音频
- 跨环境处理边缘情况和错误
- 支持所有编解码器以提供完整的跨浏览器支持
- 自动缓存以提高性能
- 单独、分组或全局控制声音
- 一次播放多个声音
- 简单的声音精灵定义和播放
- 完全控制衰落、速率、搜索、音量等。
- 轻松添加 3D 空间声音或立体声声像
- 模块化 - 使用您想要的并且易于扩展
- 没有外部依赖，只有纯 JavaScript
- 轻至 7kb 压缩包
安装
使用npm安装
代码语言：javascript复制npm install howler
使用yarn安装
代码语言：javascript复制yarn add howler
引入依赖
代码语言：javascript复制import {Howl, Howler} from 'howler';
使用
播放 MP3：
代码语言：javascript复制var sound = new Howl({
src: ['sound.mp3']
});
sound.play();
流式音频（用于实时音频或大文件）:
代码语言：javascript复制var sound = new Howl({
src: ['stream.mp3'],
html5: true
});
sound.play();
监听事件：
代码语言：javascript复制var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
// 第一次调用后清除侦听器
sound.once('load', function(){
sound.play();
});
// 声音播放完毕时触发
sound.on('end', function(){
console.log('Finished!');
});
github链接：https://github.com/goldfire/howler.js 官网地址：https://howlerjs.com/
最后
欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~
进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。
