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

成都創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、喀什網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城網(wǎng)站制作、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為喀什等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

前言

相信有很多人在寫移動端音頻播放的時(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上可以自動轉(zhuǎn)為HTML 5 Audio。這點(diǎn)很是貼心。
• 移動端的Safari和Chrome都禁止網(wǎng)頁自動播放聲音，必須通過用戶的操作，touch, click等觸發(fā)。Howler.js可以設(shè)置成自動捕捉用戶操作激活（解禁）聲音播放。
• 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';

// 初始化一個(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
});

當(dāng)前文章：利用Howler.js如何實(shí)現(xiàn)Web音頻播放-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://www.chinadenli.net/article22/ccsjjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、標(biāo)簽優(yōu)化、網(wǎng)站排名、虛擬主機(jī)、網(wǎng)站維護(hù)、靜態(tài)網(wǎng)站

廣告

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