005_Buzz播放音频

蒋无尘

2023-12-01

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播放音频

相关阅读

相关文章

相关问答

相关文档