详解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 相关文章推荐
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 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
星际RPG字典
2020/03/04 星际争霸
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
php实现URL加密解密的方法
2016/11/17 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
在MAC上搭建python数据分析开发环境
2016/01/26 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
快速入门python学习笔记
2017/12/06 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
深入浅析python的第三方库pandas
2020/02/13 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
幼儿园家长评语
2014/02/10 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
设计顾问服务计划书
2014/05/04 职场文书
小学生个人先进事迹材料
2014/05/08 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
个人收入证明范本
2014/09/18 职场文书
高校教师个人总结
2015/02/10 职场文书
红色影片观后感
2015/06/18 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python