【请教】播放多个音频,顺序播放/设置间隔时间,有插件或者控件啥的吗?

hgwyl 2020-12-07 10:31:15
播放多个音频,顺序播放/设置间隔时间,有插件或者控件啥的吗? 1、多个音频,顺序播放 2、页面可以设置播放间隔,比如默认为5秒,改设置为8秒 3、过程中,可以“暂停”;点击后再继续 4、过程中,可以选列表中的某个;比如正在播放第5个音频,点击播放第2个(接着顺序播放3、4、5) 请问有什么插件、控件、js库之类的吗? 或者类似的? 先行谢过~~~
...全文
11935 8 打赏 收藏 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
hgwyl 2020-12-13
  • 打赏
  • 举报
回复
引用 7 楼 网络游侠2012 的回复:
[quote=引用 1 楼 hgwyl的回复:]“设置时间间隔” 1、JS可以原生实现吗?暂停5秒再继续播放。 2、如果JS不能原生实现的话,貌似可以准备一个5秒的静音音频,循环插入正常音频之中,实现“时间间隔”效果?
你这是曲线救国 啊哈哈[/quote] 最后用了JS原生的延迟函数解决了。 同样谢谢大哥~
网络游侠2012 2020-12-12
  • 打赏
  • 举报
回复
引用 1 楼 hgwyl的回复:
“设置时间间隔” 1、JS可以原生实现吗?暂停5秒再继续播放。 2、如果JS不能原生实现的话,貌似可以准备一个5秒的静音音频,循环插入正常音频之中,实现“时间间隔”效果?
你这是曲线救国 啊哈哈
hgwyl 2020-12-11
  • 打赏
  • 举报
回复
引用 4 楼 similing 的回复:
其实这里你可以用WebAudioAPI直接控制管理的: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API
看了一下。 这个这个…技术不够,不会用……
hgwyl 2020-12-11
  • 打赏
  • 举报
回复
等挺久,那兄弟没来,先结贴了。找机会另外结给他好了。(不过他应该很多分)
similing 2020-12-09
  • 打赏
  • 举报
回复
其实这里你可以用WebAudioAPI直接控制管理的: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API
hgwyl 2020-12-07
  • 打赏
  • 举报
回复
比较完美的办法,就是在点击播放按钮时,“延迟5秒后再播放” 这个“延迟5秒后再播放”怎么实现?
	<script>
		//音乐资源
		var myMusics = new Array(
			{src:"Tara&筷子兄弟 小苹果.mp3",title:"Tara&筷子兄弟 小苹果"},
			{src:"悲怆第三章.mp3",title:"悲怆第三章"},
			{src:"Sound of My Dream.mp3",title:"Sound of My Dream"}
		);	
		//数组下标
		var index = 1;	
		//播放状态 单曲循环:0 列表循环:1 随机播放:2
		var playState = 1;
		//创建音乐列表
		function createBox(){
			var html="";
			for(var i=0;i<myMusics.length;i++){
				html+="<li>"+(i+1)+"  <a href='javascript:clickName("+i+");'>"+myMusics[i].title+"</a></li>"
			}
			return html
		}
		//页面加载		
		$(document).ready(function(){
			$("#"+"box").append(createBox());
			playMusic(1);
			
			//按钮"下一首"单击事件
			$("#nextMusic").click(function(){
				playMusic(1,1);
			});
			//按钮"上一首"单击事件
			$("#lastMusic").click(function(){
				playMusic(2);
			});
			////按钮"播放/暂停"单击事件
			$("#playMusic").click(function(){
				if($(this).val()=="播放"){
					$(this).val("暂停");
					document.getElementById("media").play();
				}else if($(this).val()=="暂停"){
					$(this).val("播放");
					document.getElementById("media").pause();
				}
			});
			
			//播放状态
			$("#playState").change(function(){
				playState = $(this).val();				
			});
			
			$("li").mouseover(function(){
				$(this).css("background-color","#F0F0F0");
			});
			
			$("li").mouseout(function(){
				$(this).css("background-color","#FFFFFF");
				$($("li")[index]).css("background-color","#F0F0F0");
			});
			
			
		});
		
		//点击名字播放音乐
		function clickName(i){
			index=i;
			playMusic(0);
		}
		
		//音乐播放
		function playMusic(s,n){
			$("#playMusic").val("暂停");
			if(s==0){//点击名字播放音乐
			
			}else if(s==1){//下一首
				$("#playMusic").val("暂停");
				if(playState==0){//单曲循环
					if(n==0){
					
					}else if(n==1){
						index++;
						if(index>=myMusics.length){
							index=0;
						}
					}
				}else if(playState==1){//列表循环
					index++;
					if(index>=myMusics.length){
						index=0;
					}
				}else if(playState==2){//随机播放
					index = Math.floor(Math.random()*myMusics.length);
				}
			}else if(s==2){//上一首
				index--;
				if(index<0){
					index=myMusics.length-1;
				}
			}
			
			//修改audio资源路径
			$("#media").attr("src",myMusics[index].src);
			//音乐播放
			$("#media").play;
			//显示音乐名称
			$("#musicTitle").text(myMusics[index].title);
			$("title").text(myMusics[index].title);
			//重置li列表背景色
			$("#box").children("li").css("background-color","#FFFFFF");
			$("#box").children("li").css("font-weight","normal");
			
			//修改播放音乐背景色
			$($("#box").children("li")[index]).css("background-color","#F0F0F0");
			$($("#box").children("li")[index]).css("font-weight","bold");
			
			$("#sliding").offset({left:60});
		}

	</script>

		<audio id="media" src="" autoplay="autoplay" onended="playMusic(1,0)"></audio>
		
		<div style="float:left;margin-left:50px;width:450px;height:200px;">
				<p id="musicTitle"></p>
				<input id="lastMusic" type="button" value="上一首" />
				<input id="playMusic" type="button" value="暂停" />
				<input id="nextMusic" type="button" value="下一首" />
				<ul id="box" style="border:1px solid black;padding:0px;height:300px;width:300px;overflow-y:auto;"></ul>
		</div>

hgwyl 2020-12-07
  • 打赏
  • 举报
回复
chinaz那边找到一个jquery 基本符合条件 能顺序播放,能暂停(后继续播放),有列表 https://sc.chinaz.com/jiaobendemo.aspx?downloadid=232015114504846 现在还欠缺一个功能:正常播放的话,2段音频间设置时间间隔。 想了一下,如果可以在音频前插入1个5秒的空白音频,就相当于间隔了。 (完整功能是分别准备5、6、7、8、9、10……秒的空白音频,设置不同时间间隔时调用对应的空白音频) 请经验大神们指点一下,代码应该怎么写……?
hgwyl 2020-12-07
  • 打赏
  • 举报
回复
“设置时间间隔” 1、JS可以原生实现吗?暂停5秒再继续播放。 2、如果JS不能原生实现的话,貌似可以准备一个5秒的静音音频,循环插入正常音频之中,实现“时间间隔”效果?
内容概要:本文档是《Video for Linux Two API 规范》第0.24版的中文手册,系统性地介绍了V4L2(Video for Linux 2)的核心API及其使用方法。内容涵盖设备打开与关闭、能力查询、视频与音频输入输出管理、调谐器与调制器配置、视频标准选择、用户与扩展控制、数据格式协商、图像裁剪缩放、流控参数设置,以及多种I/O传输方式(如read/write、内存映射、用户指针等)。手册还详细定义了各类图像像素格式(如YUV、RGB、压缩格式)、缓冲区管理机制和ioctl控制接口,并附有编程示例和驱动开发指导,全面支持从基础捕获到高级视频处理的应用开发。; 适合人群:从事Linux平台下音视频驱动或应用程序开发的工程师,尤其是具备C语言基础并熟悉系统级编程的研发人员;适用于1-5年经验的嵌入式、多媒体或驱动开发者。; 使用场景及目标:① 开发基于摄像头、电视卡、视频采集卡等设备的Linux视频应用;② 实现视频采集、格式转换、流媒体传输、overlay叠加显示等功能;③ 调试和优化V4L2兼容硬件的驱动程序;④ 理解并运用ioctl接口进行设备控制与状态查询。; 阅读建议:建议结合实际硬件环境边学边练,优先通过VIDIOC_QUERYCAP确认设备能力,再逐步配置输入源、数据格式与I/O方式;注意各结构体字段的初始化与对齐要求,关注版本变更带来的兼容性问题,可参考附录示例代码进行调试验证。
数据集可视化效果见下方。 【数据集概况】 · 检测类别(中文):[自行车(bicycle), 公交车(bus), 汽车(car), 行人(person), 骑行者(rider), 踏板车(scooter), 卡车(truck)] · 训练集:1334 张 · 验证集:571 张 · 测试集:0 张 · 总计:1905 张 该数据集基于激光雷达点云生成的二维投影图像,真实还原了城市道路复杂交通场景下的多目标检测需求。图像呈现为典型的鸟瞰视角或前视视角的点云密度图,清晰捕捉到包括汽车、卡车、公交车、自行车、踏板车及行人等各类交通参与者在城市街道中的动态分布。数据集聚焦于高密度交通环境下的目标识别,具备高度的现实应用价值,可有效支撑智能交通系统、自动驾驶感知模块及城市安防监控等领域的技术开发。... 【训练曲线与评估图】 【模型训练配置】 参数 | 值 模型 | yolo26n 训练轮数 | 100 epochs 输入尺寸 | 640x640 批次大小 | 24 优化器 | auto 初始学习率 | 0.01 训练设备 【关键指标汇总】 训练了 100 个 epoch,最终轮指标: 指标 | 数值 mAP50 | **0.6355** mAP50-95 | 0.3557 Precision | 0.6116 Recall | 0.6067 train/box_loss | 1.3609 train/cls_loss | 1.1274 val/box_loss | 1.5101 val/cls_loss | 1.2023 【训练过程分析】 100 轮训练后 mAP50 仅 0.6355,模型收敛不充分。Loss 曲线前期下降后进入平台期,mAP 提升缓慢。mAP50-95 为 0.3557,定位精度同样偏低。 【模型性能评估】 Precision 0.6116、Recall ...
代码转载自:https://pan.quark.cn/s/a4b39357ea24 一、背景 对近一年以来(2024年H2~2025年H1),在部门非雇员OD管理中出现的主动管理、计划外离职等数据进行整理和复盘,提炼出OD招聘和管理中的经验教训,指导我们在选、用、育、留等各环节的改进,尤其在综合面试环节需要强化一些面试要素,持续优化面试环节的标准和管理过程中差异化的管理方案,提升OD的有效留存率。 二、问题/事件描述 部门近一年时间(2024年H2~2025年H1),出现约9例OD离职(含主动管理)情况,占比约7%,一定程度影响了OD的有效贡献率,本文对数据进行整理和提炼,识别风险因素,提炼共性原因,思考改进方案。 三、分析与对策 WXX - 基本数据:2002年生人,独生子女,流转资源,OD在岗4个月,985学校毕业,非软件专业(金融类专业) - 特征:自学习了一些Python就通过考试进入面试环节 - 面试环节复盘:综面环节第一次没有通过,但因业务需求紧迫,XM对人力补充比较迫切,再三沟通后,综面勉强通过 - 工作中结果:工作中与人交流不多,工作几个月攒到一些收入就准备离职出去玩。 主动离职 FXX - 基本数据:2002年生人,独生子女,流转资源,OD工作3个月,成绩较好,专业对口,父母为国企职工 - 特征:候选人沟通积极,思路清晰 - 面试环节复盘:综面意见较好,沟通比较积极,入职体检正常。 当时团队交付压力大,需要补充新鲜力量。 综面正常通过 - 工作中结果:入职后就经常生病(感冒等),工作后就隔三差五请假看病,整体出勤率低于50%时间,无法有效安排工作。 后主动管理 SXX - 基本数据:2001年生人,独生子女,OD工作2年,985大学环境专业,有一段时...

87,984

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧