005_Buzz播放音频
生活随笔
收集整理的這篇文章主要介紹了
005_Buzz播放音频
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1. Buzz是一個(gè)用于操作HTML5音頻標(biāo)簽的JavaScript library。它是一個(gè)沒(méi)有用到其它JavaScript框架獨(dú)立Library。并擁有豐富的API可以用來(lái)管理這個(gè)音頻標(biāo)簽提供的所有功能。支持的功能包括播放、暫停、停止、循環(huán)和音量控制、取得音頻信息、判斷音頻類型是否支持、可同時(shí)處理多個(gè)音頻文件。還可以取得播放結(jié)束、錯(cuò)誤產(chǎn)生或音量變化等事件。
2. 網(wǎng)址
2.1. 官方網(wǎng)址: https://buzz.jaysalvat.com/
2.2. github網(wǎng)址: https://github.com/jaysalvat/buzz
3. 實(shí)例化一個(gè)音頻文件
var menu = new buzz.sound("sounds/menu.mp3");4. 檢測(cè)瀏覽器支持
4.1. 檢測(cè)瀏覽器是否支持html5 audio標(biāo)簽
if (!buzz.isSupported()) {alert("瀏覽器不支持html5音頻播放。"); }4.2. 檢測(cè)瀏覽器是否支持ogg音頻播放
if (!buzz.isOGGSupported()) {alert("瀏覽器不支持ogg音頻播放。"); }4.3. 檢測(cè)瀏覽器是否支持wav音頻播放
if (!buzz.isWAVSupported()) {alert("瀏覽器不支持wav音頻播放。"); }4.4. 檢測(cè)瀏覽器是否支持mp3音頻播放
if (!buzz.isMP3Supported()) {alert("瀏覽器不支持mp3音頻播放。"); }4.5. 檢測(cè)瀏覽器是否支持aac音頻播放
if (!buzz.isAACSupported()) {alert("瀏覽器不支持aac音頻播放。"); }5. 加載聲音
var menu = new buzz.sound("sounds/menu.mp3"); menu.load();6. 播放音樂(lè)
var menu = new buzz.sound("sounds/menu.mp3"); menu.play();7. 暫停播放音樂(lè)
var menu = new buzz.sound("sounds/menu.mp3"); menu.pause();8. 自動(dòng)播放/暫停菜單音樂(lè)
var menu = new buzz.sound("sounds/menu.mp3"); menu.togglePlay();9. 音樂(lè)是否暫停或播放完成
var menu = new buzz.sound("sounds/menu.mp3"); menu.isPaused();10. 停止播放音樂(lè)
var menu = new buzz.sound("sounds/menu.mp3"); menu.stop();11. 音樂(lè)是否播放完成
var menu = new buzz.sound("sounds/menu.mp3"); menu.isEnded();12. 循環(huán)播放音樂(lè)
var menu = new buzz.sound("sounds/menu.mp3"); menu.loop();13. 取消循環(huán)播放
var menu = new buzz.sound("sounds/menu.mp3"); menu.unloop();14. 靜音音樂(lè)
var menu = new buzz.sound("sounds/menu.mp3"); menu.mute();15. 取消靜音
var menu = new buzz.sound("sounds/menu.mp3"); menu.unmute();16. 自動(dòng)靜音/取消靜音
var menu = new buzz.sound("sounds/menu.mp3"); menu.toggleMute();17. 是否靜音音樂(lè)
var menu = new buzz.sound("sounds/menu.mp3"); menu.isMuted();18. 設(shè)置音樂(lè)音量
var menu = new buzz.sound("sounds/menu.mp3"); menu.setVolume(80);19. 獲取音樂(lè)音量
var menu = new buzz.sound("sounds/menu.mp3"); menu.getVolume();20. 遞增音樂(lè)音量
var menu = new buzz.sound("sounds/menu.mp3"); menu.increaseVolume();21. 遞減音樂(lè)音量
var menu = new buzz.sound("sounds/menu.mp3"); menu.decreaseVolume();22. 指定時(shí)間內(nèi), 逐漸增加音量從0-100
var menu = new buzz.sound("sounds/menu.mp3"); menu.fadeIn(2000, function(){console.log("當(dāng)前音量設(shè)置為: " + menu.getVolume()); });23. 指定時(shí)間內(nèi), 逐漸減小音量從當(dāng)前音量到零
var menu = new buzz.sound("sounds/menu.mp3"); menu.fadeOut(2000, function(){console.log("當(dāng)前音量設(shè)置為: " + menu.getVolume()); });24. 指定時(shí)間內(nèi), 音量從當(dāng)前音量到指定值
var menu = new buzz.sound("sounds/menu.mp3"); menu.fadeTo(100, 2000, function(){console.log("當(dāng)前音量設(shè)置為: " + menu.getVolume()); });25. 指定時(shí)間內(nèi), 切換音樂(lè)
var menu = new buzz.sound("sounds/menu.mp3"); var boom = new buzz.sound("sounds/boom.mp3"); menu.fadeWith(boom, 2000);26. 以秒為單位設(shè)置播放時(shí)間位置
var menu = new buzz.sound("sounds/menu.mp3"); menu.setTime(90);27. 以秒為單位轉(zhuǎn)換00:00或00:00:00時(shí)間
var menu = new buzz.sound("sounds/menu.mp3"); menu.setTime(buzz.fromTimer("00:10"));28. 獲取當(dāng)前音樂(lè)播放時(shí)間位置
var menu = new buzz.sound("sounds/menu.mp3"); menu.getTime();29. 音樂(lè)時(shí)長(zhǎng)
var menu = new buzz.sound("sounds/menu.mp3"); menu.getDuration();30. 以百分比設(shè)置播放時(shí)間位置
var menu = new buzz.sound("sounds/menu.mp3"); menu.setPercent(80);31. 以百分比獲取播放時(shí)間位置
var menu = new buzz.sound("sounds/menu.mp3"); menu.getPercent();32. 設(shè)置播放速度
var menu = new buzz.sound("sounds/menu.mp3"); menu.setSpeed(2);33. 獲取播放速度
var menu = new buzz.sound("sounds/menu.mp3"); menu.getSpeed();34. 例子
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Buzz播放音頻</title><script type="text/javascript" src="buzz.js"></script></head><body><h1 style="color: red;">直接播放音頻、獲取音頻時(shí)長(zhǎng)等均無(wú)效</h1><div id="time">當(dāng)前音頻播放時(shí)間位置: </div><div id="duration">音頻時(shí)長(zhǎng): </div><div id="percent">以百分比獲取播放時(shí)間位置: </div><div id="speed">獲取播放速度: </div><script type="text/javascript">var menu = new buzz.sound("sounds/menu.mp3");document.write("<br />");if (!buzz.isSupported()) {alert("瀏覽器不支持html5音頻播放。");}else{document.write("瀏覽器支持html5音頻播放。<br />")}if (!buzz.isOGGSupported()) {alert("瀏覽器不支持ogg音頻播放。");}else{document.write("瀏覽器支持ogg音頻播放。<br />")}if (!buzz.isWAVSupported()) {alert("瀏覽器不支持wav音頻播放。");}else{document.write("瀏覽器支持wav音頻播放。<br />")}if (!buzz.isMP3Supported()) {alert("瀏覽器不支持mp3音頻播放。");}else{document.write("瀏覽器支持mp3音頻播放。<br />")}if (!buzz.isAACSupported()) {alert("瀏覽器不支持aac音頻播放。");}else{document.write("瀏覽器支持aac音頻播放。<br />")}document.write("<br />");function playMenu(){menu.play();}function pauseMenu(){menu.pause();}function togglePlayMenu(){menu.togglePlay();}function isPausedMenu(){alert("菜單音樂(lè)是否暫停或播放完成: " + menu.isPaused());}function stopMenu(){menu.stop();}function isEndedMenu(){alert("菜單音樂(lè)是否播放完成: " + menu.isEnded());}function loopPlayMenu(){menu.loop().play();}function unloopMenu(){menu.unloop();}function muteMenu(){menu.mute();}function unmuteMenu(){menu.unmute();}function toggleMuteMenu(){menu.toggleMute();}function isMutedMenu(){alert("是否靜音菜單音樂(lè): " + menu.isMuted());}function setVolumeMenu(){var volume = Math.floor(Math.random() * 100);console.log("當(dāng)前音量設(shè)置為: " + volume);menu.setVolume(volume);}function getVolumeMenu(){alert("獲取菜單音樂(lè)音量: " + menu.getVolume());}function increaseVolumeMenu(){menu.increaseVolume();}function decreaseVolumeMenu(){menu.decreaseVolume();}function fadeInMenu(){menu.fadeIn(2000, function(){console.log("當(dāng)前音量設(shè)置為: " + menu.getVolume());});}function fadeOutMenu(){menu.fadeOut(2000, function(){console.log("當(dāng)前音量設(shè)置為: " + menu.getVolume());});}function fadeToMenu(){menu.fadeTo(100, 2000, function(){console.log("當(dāng)前音量設(shè)置為: " + menu.getVolume());});}function fadeWithMenu(){var boom = new buzz.sound("sounds/boom.mp3");menu.fadeWith(boom, 2000);}function setTime(){var time = Math.floor(Math.random() * parseInt(menu.getDuration()));console.log("以秒為單位設(shè)置播放時(shí)間位置: " + time + "s");menu.setTime(time);}function setTimeFromTimer(){menu.setTime(buzz.fromTimer("00:10"));}function getTime(){var time = menu.getTime();document.getElementById("time").innerHTML += time + "s, ";}function playDuration(){var duration = menu.getDuration();document.getElementById("duration").innerHTML += duration + "s";}function setPercent(){var percent = Math.floor(Math.random() * 100);console.log("以百分比設(shè)置播放時(shí)間位置: " + percent + "%");menu.setPercent(percent);}function getPercent(){var percent = menu.getPercent();document.getElementById("percent").innerHTML += percent + "%, ";}function setSpeed(){var speed = Math.ceil(Math.random()) + 1;console.log("設(shè)置播放速度: " + speed);menu.setSpeed(speed);}function getSpeed(){var speed = menu.getSpeed();document.getElementById("speed").innerHTML += speed + ", ";}</script><button onclick="playMenu()">播放菜單音樂(lè)</button><button onclick="pauseMenu()">暫停播放菜單音樂(lè)</button><button onclick="togglePlayMenu()">自動(dòng)播放/暫停菜單音樂(lè)</button><button onclick="isPausedMenu()">菜單音樂(lè)是否暫停或播放完成</button><br /><br /><button onclick="stopMenu()">停止播放菜單音樂(lè)</button><button onclick="isEndedMenu()">菜單音樂(lè)是否播放完成</button><button onclick="loopPlayMenu()">循環(huán)播放菜單音樂(lè)</button><button onclick="unloopMenu()">取消循環(huán)播放</button> <br /><br /><button onclick="muteMenu()">靜音菜單音樂(lè)</button><button onclick="unmuteMenu()">取消靜音菜單音樂(lè)</button><button onclick="toggleMuteMenu()">自動(dòng)靜音/取消靜音菜單音樂(lè)</button><button onclick="isMutedMenu()">是否靜音菜單音樂(lè)</button><br /><br /><button onclick="setVolumeMenu()">設(shè)置菜單音樂(lè)音量</button><button onclick="getVolumeMenu()">獲取菜單音樂(lè)音量</button><button onclick="increaseVolumeMenu()">遞增菜單音樂(lè)音量</button><button onclick="decreaseVolumeMenu()">遞減菜單音樂(lè)音量</button><br /><br /><button onclick="fadeInMenu()">指定時(shí)間內(nèi), 逐漸增加音量從0-100</button><button onclick="fadeOutMenu()">指定時(shí)間內(nèi), 逐漸減小音量從當(dāng)前音量-0</button><button onclick="fadeToMenu()">指定時(shí)間內(nèi), 音量從當(dāng)前音量到指定值</button><button onclick="fadeWithMenu()">指定時(shí)間內(nèi), 切換音樂(lè)</button><br /><br /><button onclick="setTime()">以秒為單位設(shè)置播放時(shí)間位置</button><button onclick="setTimeFromTimer()">以秒為單位轉(zhuǎn)換00:00或00:00:00時(shí)間</button><button onclick="getTime()">當(dāng)前菜單音樂(lè)播放時(shí)間位置</button><button onclick="playDuration()">菜單音樂(lè)時(shí)長(zhǎng)</button><br /><br /><button onclick="setPercent()">以百分比設(shè)置播放時(shí)間位置</button><button onclick="getPercent()">以百分比獲取播放時(shí)間位置</button><button onclick="setSpeed()">設(shè)置播放速度</button><button onclick="getSpeed()">獲取播放速度</button></body> </html>總結(jié)
以上是生活随笔為你收集整理的005_Buzz播放音频的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 007_Buzz事件
- 下一篇： 001_JavaScript简介