利用Howler.js如何实现Web音频播放-创新互联
本篇文章给大家分享的是有关利用Howler.js 如何实现Web音频播放,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
成都创新互联公司专注于企业营销型网站、网站重做改版、喀什网站定制设计、自适应品牌网站建设、H5响应式网站、商城网站制作、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为喀什等各大城市提供网站开发制作服务。前言
相信有很多人在写移动端音频播放的时候都踩过不少坑,特别是复杂音频项目在兼容多种设备的时候更是让你抓狂,比如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如何实现Web音频播放-创新互联
链接URL:http://pwwzsj.com/article/ccsjjc.html