前言
相信有很多人在写移动端音频播放的时候都踩过不少坑,特别是复杂音频项目在兼容多种设备的时候更是让你抓狂,比如ios端不能一开始就播放音频,必须要用户进行了操作。。。。
偶然间了解到了一个兼容所有设备和浏览器的音频引擎Howler.js
使用了一下非常完美
特点及兼容性
Howler.js
默认使用Web Audio
,但在IE
上可以自动转为HTML 5 Audio
。这点很是贴心。移动端的
Safari
和Chrome
都禁止网页自动播放声音,必须通过用户的操作,touch, click等触发。Howler.js
可以设置成自动捕捉用户操作激活(解禁)声音播放。Howler.js
支持很多声音格式以兼容各种浏览器。MP3
,MPEG
,OPUS
,OGG
,OGA
,WAV
,AAC
,CAF
,M4A
,MP4
,WEBA
,WEBM
,DOLBY
,FLAC
.几乎涵盖了所有格式,默认为Web Audio API,向后兼容为HTML5 Audio支持3D游戏
自动缓存
支持淡入淡出效果
轻量,压缩后只有7kb
纯JS
无第三方依赖
模块化
「更多特性可以去Github查看 Howler.js」
使用方法
官网上都有介绍 这里不过多讨论
import {Howl, Howler} from 'howler';
// 初始化一个音频类
const sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
// 播放音频
sound.play();
// 改变全局音频声音大小
Howler.volume(0.5);
// 只想改变某个音频的大小可以在初始化的时候修改
const sound = new Howl({
src: ['sound.webm', 'sound.mp3'],
volume:0.5
});
总结
自己封装的音频库多多少少会有一些性能和兼容问题,比如音频循环播放的时候Howler
就处理的非常好不会有切割的感觉
❝有一天在和同事讨论音频解决方案,讨论了半天说去百度找一个音频库,最后找了半天都没找到,在要放弃的时候打开头条刷了一会新闻,突然发现有一篇文章就提到了这个解决方案,不得不说字节🐂 ❤️❤️❤️
❞