mp3测试网站

最新推荐文章于 2026-05-18 12:37:43 发布

原创

最新推荐文章于 2026-05-18 12:37:43 发布 · 2.2k 阅读

本文介绍了如何使用PHP和JavaScript开发了一个MP3播放器，它能自动搜索文件夹、添加播放按钮，通过localStorage保存播放记录，支持上传和下载历史，实现了文件夹名替换和无缝播放控制。

一般的MP3播放器，对于历史记录支持不是很好，闲来无事自己写一个网页，前台后台有一点，主要是能自动连续播放，支持上传历史记录。
自己用的也就不用写用户登录了。
学到了不少知识，自己记录一下。

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

<?php 
 	ob_clean();//清除上面的内容
 	if($_SERVER['REQUEST_METHOD']==='POST' ){
   
    
	//读取历史记录并返回
 		if($_POST['em']="em"){
   
   
 			$file=fopen('mp3record', 'r');
 			$rec=fread($file, filesize('mp3record'));
 			echo $rec ;				 
 		}
	//接收历史记录并写入
 		if($_POST['record']){
   
   
 			$_file=fopen("mp3record", 'w');
	 	    //$historyMessage="time=".$_POST["time"]."&file=".$_POST["file"]."&folder=".$_POST["folder"];
 			fwrite($_file, $_POST['record']);
 			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">
					<