溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關利用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
