本篇文章给大家分享的是有关利用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音频播放,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。