本篇文章给大家分享的是有关利用Howler.js 如何实现Web音频播放，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
前言
相信有很多人在写移动端音频播放的时候都踩过不少坑，特别是复杂音频项目在兼容多种设备的时候更是让你抓狂，比如ios端不能一开始就播放音频，必须要用户进行了操作。。。。
偶然间了解到了一个兼容所有设备和浏览器的音频引擎Howler.js 使用了一下非常完美
Howler.js 是一个新的 JavaScript 库用于处理 Web 中的音频，该库最初是为一个 HTML5 游戏引擎所开发，但也可用于其他的 Web 项目，Howler.js 基于 Google 的 Web Audio API，能够帮助你快速简单全面的控制音频。
特点及兼容性
「更多特性可以去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.js 如何实现Web音频播放，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
