本篇文章給大家分享的是有關利用Howler.js 如何實現Web音頻播放，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創新互聯公司專注于企業營銷型網站、網站重做改版、喀什網站定制設計、自適應品牌網站建設、H5響應式網站、商城網站制作、集團公司官網建設、外貿網站建設、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為喀什等各大城市提供網站開發制作服務。

前言

相信有很多人在寫移動端音頻播放的時候都踩過不少坑，特別是復雜音頻項目在兼容多種設備的時候更是讓你抓狂，比如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如何實現Web音頻播放-創新互聯
標題路徑：http://vcdvsql.cn/article22/ccsjjc.html

成都網站建設公司_創新互聯，為您提供微信公眾號、標簽優化、網站排名、虛擬主機、網站維護、靜態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯