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


Posted in Javascript onAugust 23, 2020

前言

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

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

Howler.js 是一个新的 JavaScript 库用于处理 Web 中的音频,该库最初是为一个 HTML5 游戏引擎所开发,但也可用于其他的 Web 项目,Howler.js 基于 Google 的 Web Audio API,能够帮助你快速简单全面的控制音频。

特点及兼容性

  • 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.几乎涵盖了所有格式
  • 支持3D游戏
  • 自动缓存
  • 支持淡入淡出效果
  • 轻量
  • 纯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.js

最基本的,一个MP3播放:

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

更多的播放选项:

var sound = new Howl({
 urls: ['sound.mp3', 'sound.ogg', 'sound.wav'],
 autoplay: true,
 loop: true,
 volume: 0.5,
 onend: function() {
  console.log('Finished!');
 }
});

定义和播放某一部分的音频

var sound = new Howl({
 urls: ['sounds.mp3', 'sounds.ogg'],
 sprite: {
  blast: [0, 1000],
  laser: [2000, 3000],
  winner: [4000, 7500]
 }
});

// shoot the laser!
sound.play('laser');

总结

自己封装的音频库多多少少会有一些性能和兼容问题,比如音频循环播放的时候Howler就处理的非常好不会有切割的感觉

 到此这篇关于详解Howler.js Web音频播放终极解决方案的文章就介绍到这了,更多相关Howler.js Web音频播放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js中获取事件对象的方法小结
Mar 13 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 #Javascript
vue中watch和computed的区别与使用方法
Aug 23 #Javascript
vue动态设置页面title的方法实例
Aug 23 #Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 #Javascript
Vue中keep-alive组件的深入理解
Aug 23 #Javascript
google广告之另类js调用实现代码
Aug 22 #Javascript
JS typeof fn === 'function' && fn()详解
Aug 22 #Javascript
You might like
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
分享20个提升网站界面体验的jQuery插件
2014/12/15 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
运动会广播稿50字
2014/01/26 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
新法人代表任命书
2014/06/06 职场文书
小学领导班子对照材料
2014/08/23 职场文书
库房管理员岗位职责
2015/02/12 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle