快捷導(dǎo)航

詳解Howler.js Web音頻播放終極解決方案

更新時(shí)間：2020年08月23日 17:08:23 作者：YiHe109674

這篇文章主要介紹了詳解Howler.js Web音頻播放終極解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

相信有很多人在寫移動(dòng)端音頻播放的時(shí)候都踩過不少坑，特別是復(fù)雜音頻項(xiàng)目在兼容多種設(shè)備的時(shí)候更是讓你抓狂，比如ios端不能一開始就播放音頻，必須要用戶進(jìn)行了操作。。。。

偶然間了解到了一個(gè)兼容所有設(shè)備和瀏覽器的音頻引擎Howler.js 使用了一下非常完美

Howler.js 是一個(gè)新的 JavaScript 庫用于處理 Web 中的音頻，該庫最初是為一個(gè) HTML5 游戲引擎所開發(fā)，但也可用于其他的 Web 項(xiàng)目，Howler.js 基于 Google 的 Web Audio API，能夠幫助你快速簡單全面的控制音頻。

特點(diǎn)及兼容性

Howler.js默認(rèn)使用Web Audio，但在IE上可以自動(dòng)轉(zhuǎn)為HTML 5 Audio。這點(diǎn)很是貼心。
移動(dòng)端的Safari和Chrome都禁止網(wǎng)頁自動(dòng)播放聲音，必須通過用戶的操作，touch, click等觸發(fā)。Howler.js可以設(shè)置成自動(dòng)捕捉用戶操作激活（解禁）聲音播放。
Howler.js支持很多聲音格式以兼容各種瀏覽器。MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC.幾乎涵蓋了所有格式
支持3D游戲
自動(dòng)緩存
支持淡入淡出效果
輕量
純JS
無第三方依賴
模塊化

「更多特性可以去Github查看 Howler.js」

使用方法

官網(wǎng)上都有介紹這里不過多討論

import {Howl, Howler} from 'howler';

// 初始化一個(gè)音頻類
const sound = new Howl({
 src: ['sound.webm', 'sound.mp3']
});

// 播放音頻
sound.play();

// 改變?nèi)忠纛l聲音大小
Howler.volume(0.5);

// 只想改變某個(gè)音頻的大小可以在初始化的時(shí)候修改
const sound = new Howl({
 src: ['sound.webm', 'sound.mp3'],
 volume:0.5
});

使用Howler.js

最基本的，一個(gè)MP3播放：

var sound = new Howl({
 urls: ['sound.mp3']
}).play();

更多的播放選項(xiàng)：

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');

總結(jié)

自己封裝的音頻庫多多少少會(huì)有一些性能和兼容問題，比如音頻循環(huán)播放的時(shí)候Howler就處理的非常好不會(huì)有切割的感覺

到此這篇關(guān)于詳解Howler.js Web音頻播放終極解決方案的文章就介紹到這了,更多相關(guān)Howler.js Web音頻播放內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: