當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

005_Buzz播放音频

發布時間：2025/4/17 编程问答 49 豆豆

生活随笔收集整理的這篇文章主要介紹了 005_Buzz播放音频小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. Buzz是一個用于操作HTML5音頻標簽的JavaScript library。它是一個沒有用到其它JavaScript框架獨立Library。并擁有豐富的API可以用來管理這個音頻標簽提供的所有功能。支持的功能包括播放、暫停、停止、循環和音量控制、取得音頻信息、判斷音頻類型是否支持、可同時處理多個音頻文件。還可以取得播放結束、錯誤產生或音量變化等事件。

2. 網址

2.1. 官方網址: https://buzz.jaysalvat.com/

2.2. github網址: https://github.com/jaysalvat/buzz

3. 實例化一個音頻文件

var menu = new buzz.sound("sounds/menu.mp3");

4. 檢測瀏覽器支持

4.1. 檢測瀏覽器是否支持html5 audio標簽

if (!buzz.isSupported()) {alert("瀏覽器不支持html5音頻播放。"); }

4.2. 檢測瀏覽器是否支持ogg音頻播放

if (!buzz.isOGGSupported()) {alert("瀏覽器不支持ogg音頻播放。"); }

4.3. 檢測瀏覽器是否支持wav音頻播放

if (!buzz.isWAVSupported()) {alert("瀏覽器不支持wav音頻播放。"); }

4.4. 檢測瀏覽器是否支持mp3音頻播放

if (!buzz.isMP3Supported()) {alert("瀏覽器不支持mp3音頻播放。"); }

4.5. 檢測瀏覽器是否支持aac音頻播放

if (!buzz.isAACSupported()) {alert("瀏覽器不支持aac音頻播放。"); }

5. 加載聲音

var menu = new buzz.sound("sounds/menu.mp3"); menu.load();

6. 播放音樂

var menu = new buzz.sound("sounds/menu.mp3"); menu.play();

7. 暫停播放音樂

var menu = new buzz.sound("sounds/menu.mp3"); menu.pause();

8. 自動播放/暫停菜單音樂

var menu = new buzz.sound("sounds/menu.mp3"); menu.togglePlay();

9. 音樂是否暫停或播放完成

var menu = new buzz.sound("sounds/menu.mp3"); menu.isPaused();

10. 停止播放音樂

var menu = new buzz.sound("sounds/menu.mp3"); menu.stop();

11. 音樂是否播放完成

var menu = new buzz.sound("sounds/menu.mp3"); menu.isEnded();

12. 循環播放音樂

var menu = new buzz.sound("sounds/menu.mp3"); menu.loop();

13. 取消循環播放

var menu = new buzz.sound("sounds/menu.mp3"); menu.unloop();

14. 靜音音樂

var menu = new buzz.sound("sounds/menu.mp3"); menu.mute();

15. 取消靜音

var menu = new buzz.sound("sounds/menu.mp3"); menu.unmute();

16. 自動靜音/取消靜音

var menu = new buzz.sound("sounds/menu.mp3"); menu.toggleMute();

17. 是否靜音音樂

var menu = new buzz.sound("sounds/menu.mp3"); menu.isMuted();

18. 設置音樂音量

var menu = new buzz.sound("sounds/menu.mp3"); menu.setVolume(80);

19. 獲取音樂音量

var menu = new buzz.sound("sounds/menu.mp3"); menu.getVolume();

20. 遞增音樂音量

var menu = new buzz.sound("sounds/menu.mp3"); menu.increaseVolume();

21. 遞減音樂音量

var menu = new buzz.sound("sounds/menu.mp3"); menu.decreaseVolume();

22. 指定時間內, 逐漸增加音量從0-100

var menu = new buzz.sound("sounds/menu.mp3"); menu.fadeIn(2000, function(){console.log("當前音量設置為: " + menu.getVolume()); });

23. 指定時間內, 逐漸減小音量從當前音量到零

var menu = new buzz.sound("sounds/menu.mp3"); menu.fadeOut(2000, function(){console.log("當前音量設置為: " + menu.getVolume()); });

24. 指定時間內, 音量從當前音量到指定值

var menu = new buzz.sound("sounds/menu.mp3"); menu.fadeTo(100, 2000, function(){console.log("當前音量設置為: " + menu.getVolume()); });

25. 指定時間內, 切換音樂

var menu = new buzz.sound("sounds/menu.mp3"); var boom = new buzz.sound("sounds/boom.mp3"); menu.fadeWith(boom, 2000);

26. 以秒為單位設置播放時間位置

var menu = new buzz.sound("sounds/menu.mp3"); menu.setTime(90);

27. 以秒為單位轉換00:00或00:00:00時間

var menu = new buzz.sound("sounds/menu.mp3"); menu.setTime(buzz.fromTimer("00:10"));

28. 獲取當前音樂播放時間位置

var menu = new buzz.sound("sounds/menu.mp3"); menu.getTime();

29. 音樂時長

var menu = new buzz.sound("sounds/menu.mp3"); menu.getDuration();

30. 以百分比設置播放時間位置

var menu = new buzz.sound("sounds/menu.mp3"); menu.setPercent(80);

31. 以百分比獲取播放時間位置

var menu = new buzz.sound("sounds/menu.mp3"); menu.getPercent();

32. 設置播放速度

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;">直接播放音頻、獲取音頻時長等均無效</h1><div id="time">當前音頻播放時間位置: </div><div id="duration">音頻時長: </div><div id="percent">以百分比獲取播放時間位置: </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("菜單音樂是否暫停或播放完成: " + menu.isPaused());}function stopMenu(){menu.stop();}function isEndedMenu(){alert("菜單音樂是否播放完成: " + 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("是否靜音菜單音樂: " + menu.isMuted());}function setVolumeMenu(){var volume = Math.floor(Math.random() * 100);console.log("當前音量設置為: " + volume);menu.setVolume(volume);}function getVolumeMenu(){alert("獲取菜單音樂音量: " + menu.getVolume());}function increaseVolumeMenu(){menu.increaseVolume();}function decreaseVolumeMenu(){menu.decreaseVolume();}function fadeInMenu(){menu.fadeIn(2000, function(){console.log("當前音量設置為: " + menu.getVolume());});}function fadeOutMenu(){menu.fadeOut(2000, function(){console.log("當前音量設置為: " + menu.getVolume());});}function fadeToMenu(){menu.fadeTo(100, 2000, function(){console.log("當前音量設置為: " + 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("以秒為單位設置播放時間位置: " + 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("以百分比設置播放時間位置: " + 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("設置播放速度: " + speed);menu.setSpeed(speed);}function getSpeed(){var speed = menu.getSpeed();document.getElementById("speed").innerHTML += speed + ", ";}</script><button onclick="playMenu()">播放菜單音樂</button><button onclick="pauseMenu()">暫停播放菜單音樂</button><button onclick="togglePlayMenu()">自動播放/暫停菜單音樂</button><button onclick="isPausedMenu()">菜單音樂是否暫停或播放完成</button><br /><br /><button onclick="stopMenu()">停止播放菜單音樂</button><button onclick="isEndedMenu()">菜單音樂是否播放完成</button><button onclick="loopPlayMenu()">循環播放菜單音樂</button><button onclick="unloopMenu()">取消循環播放</button> <br /><br /><button onclick="muteMenu()">靜音菜單音樂</button><button onclick="unmuteMenu()">取消靜音菜單音樂</button><button onclick="toggleMuteMenu()">自動靜音/取消靜音菜單音樂</button><button onclick="isMutedMenu()">是否靜音菜單音樂</button><br /><br /><button onclick="setVolumeMenu()">設置菜單音樂音量</button><button onclick="getVolumeMenu()">獲取菜單音樂音量</button><button onclick="increaseVolumeMenu()">遞增菜單音樂音量</button><button onclick="decreaseVolumeMenu()">遞減菜單音樂音量</button><br /><br /><button onclick="fadeInMenu()">指定時間內, 逐漸增加音量從0-100</button><button onclick="fadeOutMenu()">指定時間內, 逐漸減小音量從當前音量-0</button><button onclick="fadeToMenu()">指定時間內, 音量從當前音量到指定值</button><button onclick="fadeWithMenu()">指定時間內, 切換音樂</button><br /><br /><button onclick="setTime()">以秒為單位設置播放時間位置</button><button onclick="setTimeFromTimer()">以秒為單位轉換00:00或00:00:00時間</button><button onclick="getTime()">當前菜單音樂播放時間位置</button><button onclick="playDuration()">菜單音樂時長</button><br /><br /><button onclick="setPercent()">以百分比設置播放時間位置</button><button onclick="getPercent()">以百分比獲取播放時間位置</button><button onclick="setSpeed()">設置播放速度</button><button onclick="getSpeed()">獲取播放速度</button></body> </html>

總結

以上是生活随笔為你收集整理的005_Buzz播放音频的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

音频
_Buzz