前端html多音频自动连续播放

卑微打工人努力学习

已于 2023-02-14 22:38:37 修改

阅读量1.7k

点赞数

分类专栏： Java前端 Java后台文章标签：音视频 html java

于 2023-02-08 21:24:46 首次发布

本文链接：https://blog.csdn.net/hxxxxx111/article/details/128942286

版权

本文介绍了如何在前端实现多音频文件的自动连续播放功能。用户通过勾选多选框选择要播放的音频，点击播放后，系统会跳转到播放界面，并依次循环播放所选的音频文件，同时高亮显示当前播放的音频。

摘要由CSDN通过智能技术生成

多音频自动连续播放，且标识正在播放的文件
一、前端界面显示多选框和播放按钮
在这里插入图片描述
勾选多选框选择播放的音频文件，点击播放，跳转到播放界面

function PlayAll(){
	var hdIdValue = $("#hdIdValue").val();
	if(hdIdValue=="")
		alert("请选择数据！");
	else{
		$.ajax({
	 		type : "POST",
	 		url : "recordsCopy.do?recordpath="+window.encodeURI(hdIdValue),
	 		success : function() {
	 			layer.open({
	 		        type: 2,
	 		        title: '语音播放',
	 		        move: false,
	 		        area: ['750px', '500px'],
	 		        content: "recordsplay?hdIdValue="+hdIdValue,
	 		        end: function () {
	 		            location.reload();}
	 		        }) 
        	},
       		 error: function(XMLHttpRequest, textStatus, errorThrown) {
       			 alert(textStatus);
      			 }	
		});
		 
	}
}

二、recordsCopy.do复制音频文件到服务器指定位置，以便播放

public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
		req.setCharacterEncoding("UTF-8");
		String recordpathss=req.getParameter("recordpath");
		String[] recordpaths=recordpathss.split(",");
		String realPath = req.getSession().getServletContext().getRealPath("/");
		doFolder(realPath+"temprecord");
		for(int i=0;i<recordpaths.length;i++) {
   
			String recordpath=recordpaths[i];
			if(recordpath != null) {
   
				String filename = recordpaths[i].split("/")[recordpaths[i].split("/").length-1];
				File source = new File(recordpath);
				File dest = new File(realPath+"temprecord/"+filename);
				
				// copy file using FileStreamslong start = System.nanoTime();
				copyFileUsingFileStreams(source, dest);
			}
		}
	}
	
	
		private static void copyFileUsingFileStreams(File source, File dest)
				throws IOException {
   
			InputStream input = null;
			OutputStream output = null