前言

相信有很多人在寫移動端音訊播放的時候都踩過不少坑，特別是複雜音訊專案在相容多種裝置的時候更是讓你抓狂，比如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

最基本的，一個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就處理的非常好不會有切割的感覺

到此這篇關於詳解Howler.js Web音訊播放終極解決方案的文章就介紹到這了,更多相關Howler.js Web音訊播放內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！