自用的MP3播放网页

最新推荐文章于 2022-09-17 11:25:48 发布
pal97
最新推荐文章于 2022-09-17 11:25:48 发布
阅读量382
点赞数
分类专栏：自用文章标签： js java html
本文链接：https://blog.csdn.net/pal97/article/details/116426122
版权
自用专栏收录该内容
12 篇文章 1 订阅
订阅专栏
自用的MP3播放网页，后台php，前台js，bootstrap


<!-- 
mp3测试网站
1、自动搜索网站中mp3目录下的文件夹，生成文件夹分类（php）
2、再从各个目录下搜索文件，添加至播放按钮（php+javascript）
3、audio元素添加监听事件，暂停或退出时记忆播放记录（localStorage永久保存）
		退出利用onbeforeunload事件，效果不是很好
4、利用post上传历史记录，服务器端用文件保存，如果是post请求则只返回历史记录，如果是get请求则不读取文件
5、将floder由序号替换成文件夹名，这样增加文件夹时不会出错
6、设定跳过片头片尾，用timeupdate事件比较简单，但会频繁刷currenttim,用定时器则操作比较繁琐

-->
<?php 
 	ob_clean();//清除上面的内容
 	
 	$_path='./record/mp3record';
 	if($_SERVER['REQUEST_METHOD']==='POST' ){ 
	//如果是‘em’标识前台要获取历史记录，后台读取历史记录并返回
 		if($_POST['em']=="em"){
 			$_file=fopen($_path, 'r');
 			$_content=fread($_file, filesize($_path));
 			echo $_content;
			// $_content=json_decode($_content,true);
			// foreach ($_content as $key ) {
			// 	$key=json_decode($key,true);
			// 	echo $key;
			// 	echo '<br>';
			// }			 
 		}
	//如故前台发送了post请求而$_POST为空，则表示是前台发送的是json数据，后台接收历史记录并写入
 		if(empty($_POST)){
 			$content=file_get_contents('php://input');
 			
 			// 如果记录文件为空或者文件不存在就直接新建一个文件 			
 			if(file_exists($_path)==false||filesize($_path)==0){				
 				$_file=fopen($_path, 'w');
 				$newcontent=array();
 				array_push($newcontent, $content);//数组追加竟然不需要重新赋值？？？返回值是数据“1”
 				$newcontent=json_encode($newcontent);
 				fwrite($_file,$newcontent);
 				fclose($_file);
 				
 			}else{
	 			//打开文件 只读不写，php写文件的方式有点奇怪，修改文件好像只能先读后写，打开两次
 				$_file=fopen($_path, 'r'); 	    
 				$old_content=fread($_file,filesize($_path));
 				fclose($_file);
	 			//将读取的json数据转换成数组
 				$old_content=json_decode($old_content,true);
	 			//如果数组的数量达到10，则删除第一个数组，不让历史记录超出十个
 				if(count($old_content)==10){
 					array_shift($old_content);
 				}	 			
	 			//将接受的数据添加到数组
 				array_push($old_content, $content);
	 			//将获得的新数组再次转换成json数据
 				$old_content=json_encode($old_content);
	 			//重新以‘w’方式打开文件，将文件写回————这里踩了坑！！！！！！
 				$_file=fopen($_path, 'w'); 
 				fwrite($_file,$old_content);
 				fclose($_file);
 			}
 		}
		exit();//php 遇到exit直接退出，不返回下面的数据，还有return，die没测试
	}

	?>
	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=devic-width, initial-scale=1">
		<script src="js/jquery-3.5.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css\bootstrap.min.css">
		<title>我的mp3网站（测试）</title>
		<style type="text/css">
			
			a{
				text-decoration-line: none;
				color: black;
				font-family:"STKaiti";
				font-weight: bolder;
			}
			li{
				border: 1px solid #FF9900;
				background-color: white;    		     
				border-radius: 10px;
				text-align: center;
				width: 10%;
				display: inline-block;
				margin-bottom: 10px;
				padding: 0px;
				cursor: pointer;
			}			
			input{
				margin-bottom: 10px;
			}
		</style>

	</head>
	<body>
		<div class="container">
			<div class="row" id="next">
				<!-- 下一首按钮 -->
				<div class="col-xs-6">
					<button class="btn btn-primary btn-block">上一首</button>
				</div>
				<div class="col-xs-6">
					<button class="btn btn-primary btn-block">下一首</button>
				</div>
			</div>
			<!-- 播放器 -->
			<div class='row'>
				<audio id="vi"  class='col-xs-12  col-md-10  col-md-offset-1' src="" controls="" autoplay="autoplay">你的浏览器不支持</audio>			
			</div>
			<!-- 快进按钮 -->
			<div class="row" id="jump">
				<div class="col-xs-6">
					<button class="btn btn-primary btn-block">快退十秒</button>
				</div>
				<div class="col-xs-6">
					<button class="btn btn-primary btn-block">快进十秒</button>
				</div>
			</div>
			<br>
			



			<!-- 下面是文件夹名称 -->
			<div class="row">
				<?php $dir=scandir("mp3"); ?> <!-- 扫描根目录 -->
				<div style="background:#fc5531 ;color:#FFF;cursor:pointer ">
					<h3 id="title">播放内容</h3>
				</div>
				<div id="index" class="row" >
					<?php foreach ($dir as $keya ) { ?>
						<?php $path="mp3/".$keya ?>
						<?php if(is_dir($path) && $keya!="." && $keya!=".."){ ?>
							<li class='col-xs-4'>
								<a href="#"><?php echo $keya ?></a>
							</li>
						<?php }} ?>
						<?php  ?>
					</div>
				</div>
				<!-- 历史记录 -->
				<div class="row" id="record">
					
					<button class="col-xs-5"  >上传历史记录</button>
					<span class="col-xs-2 glyphicon glyphicon-chevron-down" style="text-Align:center"></span>
					<button class="col-xs-5" >下载历史记录</button>
				</div>
				<!-- 这里是历史记录 先隐藏，点击后显示-->
				<div class="row" >
					
					<div id='relist' style="display: none" >
						<li class='col-xs-12' style="text-Align:left" rec=""></li>
						<li class='col-xs-12' style="text-Align:left" rec=""></li>
						<li class='col-xs-12' style="text-Align:left" rec=""></li>
						<li class='col-xs-12' style="text-Align:left" rec=""></li>
						<li class='col-xs-12' style="text-Align:left" rec=""></li>
						<li class='col-xs-12' style="text-Align:left" rec=""></li>
						<li class='col-xs-12' style="text-Align:left" rec=""></li>
						<li class='col-xs-12' style="text-Align:left" rec=""></li>
						<li class='col-xs-12' style="text-Align:left" rec=""></li>
						<li class='col-xs-12' style="text-Align:left" rec=""></li>

					</div>
				</div>
				<br>
				<!-- 下面开始是具体文件 -->
				<div id="itmeall" class='row'>
					<?php foreach ($dir as $keya ) { ?><!-- 遍历子目录 -->		
					<?php $path="mp3/".$keya ?><!-- 加上路径 -->
					<?php if(is_dir($path) && $keya!="." && $keya!=".."){ ?><!-- 判断是否是文件夹 -->
					<div style="display: inline-block; vertical-align: top " id=""><!-- 将文件夹设置到DIV中 -->
					<?php $file=scandir("$path");//php扫描目录
					$numb=0 ;
					foreach ($file as $key ) {//遍历所有文件						 
						if(strpos($key,".")&&!strpos($key,"db")){ ?><!-- //如果是视频文件 -->
						<!-- <a href="#"><?php echo $key?></a> -->
						<?php $numb++ ; 
						// 如果集数超过一百三列就放不下了，只能用四列存放
						$k=$numb<99?"col-xs-3":"col-xs-4"
						?>
						<li type="button" class="<?php echo $k ?> col-md-1" value="<?php echo $key?>">第 <?php echo $numb ?>	 集	<!-- //创建按键，用php给按钮设定value值 -->
						</li>  	
					<?php }} ?>
					<?php  ?>		
				</div>	
			<?php }; ?>
		<?php } ;?>
	</div>

<!-- 跳过片头片尾 -->
			<div class="row" id='jumphead'>
				<div class="col-xs-6">
					<div class="input-group ">
						<span class="input-group-addon">-</span>
						<input type="text" class="form-control" style="text-align: center" value=0 >
						<span class="input-group-addon">+</span>
					</div>
				</div>	
				<div class="col-xs-6">
					<div class="input-group ">
						<span class="input-group-addon">-</span>
						<input type="text" class="form-control" style="text-align: center" value=0 >
						<span class="input-group-addon">+</span>
					</div>
				</div>
				<div class="col-xs-6" style="text-align: center">跳过片头</div>
				<div class="col-xs-6" style="text-align: center">跳过片尾</div>						
			</div>




	<script type="text/javascript">
		var aObj=document.getElementById('index').children;
		var itemallObj=document.getElementById("itmeall").children;
		var titleObj=document.getElementById("title")
		for (var j = itemallObj.length - 1; j >= 0; j--) {
			itemallObj[j].id="";
			itemallObj[j].style.display='none';					
			pathNext=this.innerText;
		}

		for (var i = aObj.length - 1; i >= 0; i--) {
			aObj[i].index=i// 将循环变量作为属性赋值给A对象
			var pathNext="mp3"//子文件夹名（中间路径）
			
			aObj[i].onclick=function (i) {
				localStorage.folder=this.innerText //将文件夹的序号写入cookie
				for (var j = itemallObj.length - 1; j >= 0; j--) {
					itemallObj[j].id=""
					itemallObj[j].style.display='none'
					pathNext=this.innerText;
				}
				for (var j=0 ;j<aObj.length;j++){

					aObj[j].style.backgroundColor="white";
					aObj[j].children[0].style.color="black"
				}
				var s=this.index
				this.style.backgroundColor="#FF9900";
				this.children[0].style.color="white"
				itemallObj[s].id="itme";
				itemallObj[s].style.display='block'
			$("#itme").show(500);//调用jquery动画显示
			
	var iObj=document.getElementById('itme').children;//获取按钮（包括换行）
	var vObj=document.getElementById('vi');//获取video标签
	
//点击播放或者暂停函数，并绑定到文件名上
var playToPause=function(){
	// console.log("播放进度为：",vObj.currentTime)
	if(vObj.paused){
		vObj.play();
	}else{
		vObj.pause();
	}
}
titleObj.onclick=playToPause

	for (var i = iObj.length - 1; i >= 0; i--) {//循环所有div子元素		
			iObj[i].index=i// 将循环变量作为属性赋值给A对象
			iObj[i].onclick=function () {				
				if(parseInt(localStorage.file)!=i){
					localStorage.file=this.index ;//将文件夹的序号写入cookie
					// localStorage.record=0
				}	
				
				vObj.src="mp3/"+pathNext+"/"+this.getAttribute("value");//设定video标签的scr属性
				
				titleObj.innerText="播放内容："+this.getAttribute("value");//设定播放内容到标题中
				// vObj.currentTime=parseInt(localStorage.record)
				vObj.play();//直接播放

				for (var j = 0; j < iObj.length; j++) {
					iObj[j].style.backgroundColor="";
				}
				this.style.backgroundColor="#FF9900";
			}
		}
	}


}

</script>
<script type="text/javascript">
var vObj = document.getElementById('vi'); //获取video标签
//定义自动播放函数，根据localstorage中的数据，自动点击按钮播放
var auto_play=function(){
	for (var i=0; i<=aObj.length; i++){
		if (aObj[i].innerText==localStorage['folder']){
			aObj[i].click();			
			break;
		}

	}
	iObj=document.querySelector('#itme').children;//获取按钮（包括换行）
	
	iObj[parseInt(localStorage.file)].click();			
	vObj.currentTime=parseInt(localStorage.record)		

}

//如果有localStorage，则依据localStorage播放历史记录

try{	
	auto_play();	
}
catch{
	console.log("localStorage无文件信息")
	//默认打开第二个文件夹
	aObj[1].click();
}


var iObj = document.getElementById('itme').children;
//定义自动播放下一集函数

//定义函数自动播放下一集
var nextClick = function (s) {
        //遍历所有LI元素，根据背景色找到当前元素，点击下一元素
        for (var i = 0; i < iObj.length; i++) {
        	if (iObj[i].style.backgroundColor == "") {
        		
        		continue;
        	}
        	b = i + s;
        	iObj[b].click();        	
            localStorage.record=0//储存记录当前点击的按钮
            break;
        }
    }
    //添加播放监听结束事件，调用函数播放下一集
    vObj.addEventListener('ended', function () {
    	nextClick(1);
    }, false);


    vObj.addEventListener('pause', function () {	     
    	localStorage.record=vObj.currentTime;
    	// window.clearTimeout(time1) ;
    	// timcontrl=0
    }, false);
    //监听开始播放事件，准备跳过片头
    vObj.addEventListener('play', function () {	
    // 如果当前时间小于jumphead时间，则当前时间为jumphead时间     
    	if (this.currentTime<parseInt(localStorage.jumphead)){
    		this.currentTime=parseInt(localStorage.jumphead)
    	}
    	// 如果没有启动定时则启动定时
    	// if(timcontrl==0&&this.duration){
    	// 	jumpend();
    	// }
    	
    }, false);
    //监听播放事件，跳过片尾,vObj.duration获取媒体长度，必须在媒体加载后获取，否则为NAN
    // var jumpendnext=function(){nextClick(1)};
    // timcontrl=0
    // var jumpend=function(){
    // 	if (localStorage.jumpend) {
    // 		var playtime=parseInt(vObj.duration)-parseInt(localStorage.jumpend)-vObj.currentTime;
    // 		console.log('剩余时间为',playtime);
    // 		time1=window.setTimeout(jumpendnext,playtime*1000)
    // 		timcontrl=1;
    // 	}
    // }
    
    // vObj.addEventListener('loadedmetadata', function () {	
    // 	 jumpend();
    // 	// console.log(this.duration);
    // }, false);

	//如果当前时间加上跳转时间大于总时间，则跳转到下一集
    vObj.addEventListener('timeupdate', function () {
    // console.log(this.duration-this.currentTime-localStorage.jumpend)	;
    	if(this.duration-this.currentTime-localStorage.jumpend<=0){
    		nextClick(1)
    	}
    }, false);

//添加关闭、刷新监听事件，退出时记录进度
// window.οnbefοreunlοad= function (e) {//为什么非要传参数e 奇怪？？？？？？？
// 	localStorage.record=vObj.currentTime;

// }


    //给上一首、下一首添加点击事件
    var nextObj = document.querySelector("#next");
    nextObj.children[0].firstElementChild.onclick = function () {
    	nextClick(-1);
    }
    nextObj.children[1].firstElementChild.onclick = function () {
    	nextClick(1);
    }
    //给快进、快退添加点击事件
    var jumpObj = document.querySelector("#jump");
    jumpObj.children[0].firstElementChild.onclick = function () {
    	vObj.currentTime -= 10;
    }
    jumpObj.children[1].firstElementChild.onclick = function () {
    	vObj.currentTime += 10;
    }

</script>
<!-- 历史记录的js-->
<script type="text/javascript">
	//获取历史记录按钮
	var record=document.querySelector("#record");
	//获取历史记录列表栏
	var historyObj=document.querySelector('#relist')
	
	//给历史记录每个列表添加按钮点击事件
	for (var i = historyObj.children.length - 1; i >= 0; i--) {
		historyObj.children[i].onclick=function(){
			rec=this.getAttribute('rec');
			rec=JSON.parse(rec);
			localStorage.record=rec.record
			localStorage.folder=rec.folder
			localStorage.file=rec.file
			auto_play();
		}
	}
	// 上传历史记录按钮	
	record.children[0].onclick=function(){
		// 获取历史记录
		localStorage.record=vObj.currentTime;		
		historyMessage={folder:localStorage.folder,file:localStorage.file,record:localStorage.record};
		historyMessage=JSON.stringify(historyMessage);
		
		// 发送历史记录
		var xml=new XMLHttpRequest();
		xml.open("POST",location.href,true);
		xml.setRequestHeader("Content-type", "application/json");
		xml.setRequestHeader("kbn-version", "5.3.0");	
		xml.send(historyMessage);
		
	}
	//收起所有file按钮
	record.children[1].onclick=function(){
		var showfile=document.querySelector('#itme')
		if(showfile.style.display=='none'){
			showfile.style.display="block"
		}else{
			showfile.style.display="none"
		};				
		

	}
	//下载历史记录按钮
	record.children[2].onclick=function(){
		if(historyObj.style.display==""){
			historyObj.style.display='none';
			return;
		}
		// 获取历史记录
		
		// 拼接字符串准备POST发送，em是自定义，表示获取历史记录
		
		historyMessage='em=em'
		
		// 发送POST请求
		var xml=new XMLHttpRequest();
		xml.open("POST",location.href);
		xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xml.send(historyMessage);
		xml.onreadystatechange = function () {
			if (xml.readyState == 4 && xml.status == 200) {
		        var rec = xml.responseText;//获取到服务端返回的数据		        
		        //用JSON.parse()解析获取到的json字符串，解析后rec是数组
		        rec=JSON.parse(rec);
		        //用数组的forEach方法替换for循环，比较简单		        
		        // rec.forEach(function(i){//i是每条记录，用json解析后是对象
		        // 	i=JSON.parse(i);		        	
		        // 	console.log(i);		        	
		        // });
		        // console.log(rec);
		        for(var i=0;i<rec.length;i++){
				//设置为倒序，最新的历史记录在最上面
				ii=rec.length-i-1		        
		        //把获取的数据放到li的自定义属性上：注意自定义属性用setAttribute	
		        historyObj.children[ii].setAttribute('rec',rec[i]);	        	
		        rec[i]=JSON.parse(rec[i]);
		        historyObj.children[ii].innerText=rec[i].folder+'----第'+(parseInt(rec[i].file)+1)+'集'+'---时间:'+rec[ii].record;
		    }
		    historyObj.style.display="";
		}
	};
}	


//跳过片头

	var jumphead=document.querySelector('#jumphead').children[0].children[0].children;
	
	if(localStorage.jumphead){
		jumphead[1].value=localStorage.jumphead;
	}else{
		localStorage.jumphead=0
	}

	jumphead[2].onclick=function(){
		jumphead[1].value=parseInt(jumphead[1].value)+1;
		localStorage.jumphead=jumphead[1].value
		
	}
	//按下鼠标不动则设定一个定时器自动增加数字	
	jumphead[2].touchstart=function(){
		time2=window.setInterval(function(){
			jumphead[1].value=parseInt(jumphead[1].value)+1;
			localStorage.jumphead=jumphead[1].value
		},100)
	}	
	jumphead[2].touchend=function(){
		window.clearInterval(time2);		
	}



	jumphead[0].onclick=function(){
		jumphead[1].value=parseInt(jumphead[1].value)-1;
		localStorage.jumphead=jumphead[1].value
	}
	
	
	//输入框改变时（即键盘手动输入时）执行，
	jumphead[1].onchange=function(){
		localStorage.jumphead=this.value
	}	
	//跳过片尾
	var jumpend=document.querySelector('#jumphead').children[1].children[0].children;
	
	if(localStorage.jumpend){
		jumpend[1].value=localStorage.jumpend;
	}else{
		localStorage.jumpend=0
	}

	jumpend[2].onclick=function(){
		jumpend[1].value=parseInt(jumpend[1].value)+1;
		localStorage.jumpend=jumpend[1].value
		
	}
	jumpend[0].onclick=function(){
		jumpend[1].value=parseInt(jumpend[1].value)-1;
		localStorage.jumpend=jumpend[1].value
	}


	
	//输入框改变时（即键盘手动输入时）执行，
	jumpend[1].onchange=function(){
		localStorage.jumpend=this.value
	}								



</script>

</div>


</body>
</html>
pal97
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自用的MP3播放网页

自用的MP3播放网页，后台php，前台js，bootstrap<!-- mp3测试网站1、自动搜索网站中mp3目录下的文件夹，生成文件夹分类（php）2、再从各个目录下搜索文件，添加至播放按钮（php+javascript）3、audio元素添加监听事件，暂停或退出时记忆播放记录（localStorage永久保存）退出利用onbeforeunload事件，效果不是很好4、利用post上传历史记录，服务器端用文件保存，如果是post请求则只返回历史记录，如果是get请求则不读取文件
复制链接

扫一扫