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

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

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

前言

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

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

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

特點及兼容性

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

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

使用方法

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

import {Howl, Howler} from 'howler';

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

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

// 改變?nèi)忠纛l聲音大小
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');

總結

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

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

您可能感興趣的文章: