详解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 相关文章推荐
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
js跳转页面方法实现汇总
Feb 11 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
vue如何进行动画的封装
Sep 26 Javascript
vue实现点击追加选中样式效果
Nov 01 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
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
PHP编程风格规范分享
2014/01/15 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
完美解决AJAX跨域问题
2013/11/01 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python字典序问题实例
2014/09/26 Python
Python分支结构(switch)操作简介
2018/01/17 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
详解Python time库的使用
2019/10/10 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
tensorflow多维张量计算实例
2020/02/11 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
.net软件工程师面试题
2015/03/31 面试题
jQuery treeview树形结构应用
2021/03/24 jQuery
党员公开承诺书内容
2014/05/20 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
长江三峡导游词
2015/01/31 职场文书
企业投资意向书
2015/05/09 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android