005_Buzz播放音频

最新推荐文章于 2022-06-04 12:57:27 发布
最新推荐文章于 2022-06-04 12:57:27 发布
阅读量8.3k 收藏
点赞数
分类专栏： html5游戏 文章标签： html5 语音识别
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/109250759
版权
本文介绍了Buzz.js，一个轻量级的JavaScript库，用于简化HTML5音频标签的管理，支持播放、暂停、音量控制、音频类型检测和事件监听等功能。通过实例演示了如何在不同浏览器环境中使用和检查音频支持情况。
摘要由CSDN通过智能技术生成

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>
自由与束缚JavaJavaScript
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PyTorch | Game：FizzBuzz
Oh_MyBug的博客
02-21 3333
FizzBuzz FizzBuzz是一个简单的小游戏。游戏规则如下：从1开始往上数数，当遇到3的倍数的时候，说fizz，当遇到5的倍数，说buzz，当遇到15的倍数，就说fizzbuzz，其他情况下则正常数数。 我们可以写一个简单的小程序决定要返回正常数值还是fizz，buzz或者fizzbuzz。 def fizz_buzz_encode(i): if i % 15 == 0: ret...
412. Fizz Buzz
puspos的博客
03-18 496
问题 写一个程序，输出从 1 到 n 数字的字符串表示。 如果 n 是3的倍数，输出“Fizz”； 如果 n 是5的倍数，输出“Buzz”； 3.如果 n 同时是3和5的倍数，输出 “FizzBuzz”。 。 例子 思路 方法1 方法2 代码 //方法1 class Solution { public List<String> fizzBuzz(i...
STM32F4(BUZZ)
XinLiBK的博客
01-10 1万+
STM32F4(BUZZ) GitHub仓库：https://github.com/XinLiGitHub/STM32F4xx_BUZZ_Example PS：博文不再更新，后续更新会在GitHub仓库进行。        在实际的项目开发过程中，常常会遇到硬件电路的修改，然后修改的部分就需要修改驱动程序。想这样需求该来该去是程序员们最烦闷的事情（重复劳动痛不欲生啊~）。为了避免
OpenCV OpenCV入门介绍 | 九七的OpenCV
九七的博客
07-05 1640
一、定义介绍   OpenCV（Open Source Computer Vision Library，开源计算机视觉库）首先是一个库，它不是一个软件，也不是一种语言。OpenCV这个库本身是由C++编写而成的。OpenCV是一个跨平台的库，它可以运行在Linux、Windows、Android和Mac OS操作系统上，并且具有C++、Python、Java、MATLAB接口。OpenCV主要用于计算机视觉和机器学习，OpenCV包含了很多和这两个方面相关的函数和算法实现。 官网：https://openc
java实现图片base64写入本地
wing_1989的博客
08-17 3万+
图片上传 将图片转base64写入到本地目录 public static String uploadBase64Img(String fileDir, String base64ImgStr) { FileOutputStream os = null; String filePath = null; // 绝对路径 String relativePath = null; // 相对路径 try { if (StringUtils.isAnyBlank(file
buzz_Buzz_speaker_windows_
09-29
【标签】"Buzz speaker windows" 是这个项目的关键标签，明确了这个程序的主要特性：一是与“Buzz”（蜂鸣声）有关，这通常指的是短暂、尖锐的音频信号；二是它适用于Windows操作系统。这表明该程序设计用于在...
操作HTML5音频标签的JS库Buzz.zip
07-18
支持的功能包括播放、 暂停、停止、循环和音量控、取得音频信息、判断音频类型是否支持、可同时处理多个音频文件。还可以取得播放结束、错误产生或音量变化等事件。 示例代码： var mySound = new buzz.sound( ...
buzz语音生成，抖音，B站等网站语音合成
最新发布
07-17
在本项目中，我们将关注“buzz语音生成”，这是一项用于创建抖音、B站等网站语音合成的解决方案。该技术通常涉及到自然语言处理（NLP）、计算机语音学和音频处理等多个领域的专业知识。 Python作为一种功能强大且...
buzz:Buzz是一个小巧但功能强大的Javascript库，可让您轻松利用新HTML5音频元素。 它尝试在非现代浏览器上进行静默降级
05-08
Buzz，一个Javascript HTML5音频库 Buzz是一个小巧但功能强大的Javascript库，可让您轻松利用新HTML5音频元素。 它尝试在非现代浏览器上正常降级。 var mySound = new buzz . sound ( "/sounds/myfile" , { ...
haxe-buzz:Buzz for Haxe的外部功能
05-07
Buzz for Haxe的外部功能-一个Javascript HTML5音频库。 安装 haxelib install buzz 演示版 在samples文件夹中查看上面示例的源代码。 用法 package ; import buzz . Buzz ; import buzz . BuzzSound ; import buzz ...
【谷粒商城 Elasticsearch accounts.json】
weixin_53431104的博客
06-04 7992
谷粒商城 Elasticsearch accounts.json
Mac M1 中Jet Brains软件(Idea,Goland)无法打开问题解决
weixin_41335352的博客
11-10 3355
我是把intel版 数据迁移到 arm版中。然后又新装了arm适配版的Idea等。软件打不开的问题大概率是因为残留文件的影响。 删除旧的文件 删除：「 /Users/你的文件/Library/Preferences/ 」 目录下相关的文件 删除：「/Users/XXXX/Library/Application Support/JetBrains/xxx/xxx.vmoptions」文件。 ...
Confirming the Buzz about Hornets——2021美赛C题思路及题解
憨憨的博客
02-12 2938
Confirming the Buzz about Hornets——2021美赛C题思路及题解前言题目题目描述（翻译版，重点内容加粗）附件题目分析解决方案数据清洗与分析 前言 2021年的美赛结束了，我们选择了大数据相关的C题。看网上对C题的讨论不多，这里我对该题做一下分析并给出我们的解决方案，有什么意见或建议欢迎与我探讨。 个人认为，这是一道多因素综合评价问题，放到机器学习深度学习领域，可以称之为多模态评价问题。所以我们要思考怎样合理运用每个报告的图片、文本、位置、时间信息，对报告做一个分类，或者对所有
sqlserver Change Data Capture&Change Tracking
在路上
12-23 14万+
文章目录数据变化跟踪（SQL Server）使用change data capture或change tracking较常规方法（触发器+时间戳列+额外的表）的优势change data capture与change tracking之间的不同之处：Change Data Capturechange data capture数据流理解cdc和capture instancechange table（变更表）CDC时效原表变化的处理捕获作业与事务复制
收藏网址
热门推荐
u011569805的专栏
11-05 86万+
It will be read and overwritten.      DO NOT EDIT! --> Bookmarks Bookmarks     书签栏             桌面支持中心         从 IE 中导入                     桌面支持中心             入职                    
下一代JVM：GraalVM的十大特性
ScutKevinYzy的博客
04-27 3574
GraalVM有许多不同的组件，如果你只是听说过它或有些简单的了解，肯定无法一窥全豹。本文将列举下GraalVM的几大常用功能，看看它们都能做些什么。 高性能的现代Java 占用资源少，启动速度快 JavaScript, Java, Ruby以及R混合编程 在JVM上运行原生语言 跨语言工具 JVM应用扩展 原生应用扩展 本地Java库 数据库支持多语言 创建自己的语言 本文将要介绍的内容在Gra...
JAVA学习第五篇--java中对象的创建过程以及函数的调用过程
HERE
06-22 11万+
下面本文将详细介绍java语言中对象的创建过程，以及函数的调用过程。 class Person{ public String name="zhao"; public int ege; public static String country = "CN"; Person(String name,int ege){ this.name = name; this.ege = ege;
BUUCTF [FlareOn1]5get_it
weixin_53349587的博客
01-07 616
1.拿到文件，一开始以为是ELF文件，但是在虚拟机上打不开，最后才知道是一个DLL文件，IDA打开： 先找到这个函数，本来以为这个函数执行之后生成一个log日志文件，最后发现这个函数没什么用。。。通过交叉引用，我们找到了关键函数： 下面的case中，有很多的函数，我们打开第一个函数sub_100093B0： 里面啥也没有，往下面继续找，找到了sub_10009440函数： 这是有内容的函数，我们把if条件下的dword_10019460和dword_100194A4的最后四位提取..
如何在一场面试中展现你对Python的coding能力？
Python数据科学
04-02 836
作者：xiaoyu 微信公众号：Python数据科学 知乎：python数据分析师 如果你已经通过了招聘人员的电话面试，那么下面正是该展现你代码能力的时候了。无论是练习，作业，还是现场白板面试，这都是你证明自己的代码技巧的时刻。 我们知道面试官常常会出一些题让你来解决，作为一名程序员，除了需要具备解决问题的思路以外，代码的质量和简洁性也很关键。因为从一个人的代码可以直接看出你的基本功。对于...
libJingle代码分析
能哥的专栏
01-09 3934
MyJingle分析 1.0   能哥 QQ:627660966 2011-3-5       [在此处键入文档摘要。摘要通常为文档内容的简短概括。在此处键入文档摘要。摘要通常为文档内容的简短概括。]     1  目录 2      类说
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值