替换谷歌原生音频播放器的最佳方案

大家好,我是前端实验室的大师兄！

不知道大家有没有用过浏览器自带的音频播放，从 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安装

npm install howler

使用yarn安装

yarn add howler

引入依赖

import {Howl, Howler} from 'howler';

使用

播放 MP3：

var sound = new Howl({
  src: ['sound.mp3']
});

sound.play();

流式音频（用于实时音频或大文件）:

var sound = new Howl({
  src: ['stream.mp3'],
  html5: true
});

sound.play();

监听事件：

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 ，按提示操作即可进群。