Howler.js Web音频播放终极解决方案

11,339 阅读2分钟

前言

相信有很多人在写移动端音频播放的时候都踩过不少坑,特别是复杂音频项目在兼容多种设备的时候更是让你抓狂,比如ios端不能一开始就播放音频,必须要用户进行了操作。。。。

偶然间了解到了一个兼容所有设备和浏览器的音频引擎Howler.js 使用了一下非常完美

特点及兼容性

  • Howler.js默认使用Web Audio,但在IE上可以自动转为HTML 5 Audio。这点很是贴心。

  • 移动端的SafariChrome都禁止网页自动播放声音,必须通过用户的操作,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就处理的非常好不会有切割的感觉

有一天在和同事讨论音频解决方案,讨论了半天说去百度找一个音频库,最后找了半天都没找到,在要放弃的时候打开头条刷了一会新闻,突然发现有一篇文章就提到了这个解决方案,不得不说字节🐂 ❤️❤️❤️