详解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刷新框架子页面的七种方法代码
Nov 20 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 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
谈谈PHP语法(2)
2006/10/09 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP查询快递信息的方法
2015/03/07 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
一份python入门应该看的学习资料
2018/04/11 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
python3正则模块re的使用方法详解
2020/02/11 Python
python实现图像全景拼接
2020/03/27 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
如何表示python中的相对路径
2020/07/08 Python
python推导式的使用方法实例
2021/02/28 Python
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
大学生求职简历自我评价
2015/03/02 职场文书
教学质量月活动总结
2015/05/11 职场文书
三八妇女节主持词
2015/07/04 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
PHP中->和=>的意思
2021/03/31 PHP