admin管理员组文章数量:1583367
一般的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">
<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="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>
<!-- 下面是文件夹名称 -->
<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-6" >上传历史记录</button>
<button class="col-xs-6" >下载历史记录</button>
</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>
<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 () {
localStorage.file=this.index ;//将文件夹的序号写入cookie
//pathNext=aObj[i].innerText //子文件夹
//console.log(this.getAttribute("value"))
vObj.src="mp3/"+pathNext+"/"+this.getAttribute("value");//设定video标签的scr属性
// vObj.currentTime=parseInt(cook[" time"])//设定video的播放时间为cookie中的历史纪录
titleObj.innerText="播放内容："+this.getAttribute("value");//设定播放内容到标题中
vObj.play();//直接播放
for (var j = 0; j < iObj.length; j++) {
iObj[j].style.backgroundColor="";
}
this.style.backgroundColor="#FF9900";
}
}
}
}
</script>
<script type="text/javascript">
//如果有cookie，则依据cookie播放历史记录
try{
for (var i=0; i<=aObj.length; i++){
if (aObj[i].innerText==localStorage['folder']){
aObj[i].click();
break;
}
}//console.log(localStorage["folder"])
}
catch{
console.log("localStorage无文件信息")
//默认打开第二个文件夹
aObj[1].click();
}
var vObj = document.getElementById('vi'); //获取video标签
var iObj = document.getElementById('itme').children;
//定义自动播放下一集函数
try{
iObj[parseInt(localStorage["file"])].click()
vObj.currentTime=parseInt(localStorage["time"])//设定video的播放时间为cookie中的历史纪录
}
catch{
console.log("localStorage无time信息")
}
//定义函数自动播放下一集
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.time=0//储存记录当前点击的按钮
break;
}
}
//添加播放监听结束事件，调用函数播放下一集
vObj.addEventListener('ended', function () {
nextClick(1);
}, false);
vObj.addEventListener('pause', function () {
//通过判断变量类型是否存在，判断定时器是否已经启动
// window.clearInterval(t1)
// t1=0
localStorage.time=vObj.currentTime;
}, false);
//添加关闭、刷新监听事件，退出时记录进度
window.onbeforeunload= function (e) {//为什么非要传参数e 奇怪？？？？？？？
localStorage.time=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");
// 上传历史记录按钮
record.children[0].onclick=function(){
// 获取历史记录
vObj.pause();
time=localStorage.time;
file=localStorage.file;
folder=localStorage.folder;
// 拼接字符串准备POST发送
// historyMessage="time="+time+"&file="+file+"&folder="+folder
historyMessage='record='+localStorage.time+'/'+localStorage.file+'/'+localStorage.folder
// console.log(historyMessage);
// 发送历史记录
var xml=new XMLHttpRequest();
xml.open("POST",location.href);
xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xml.send(historyMessage);
}
//下载历史记录按钮
record.children[1].onclick=function(){
// 获取历史记录
// 拼接字符串准备POST发送
historyMessage='em=em'
// 发送历史记录
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;//获取到服务端返回的数据
console.log(rec);
rec=rec.split('=')[0].split("/");
localStorage.time=rec[0]
localStorage.folder=rec[2];
localStorage.file =parseInt(rec[1]);
console.log(rec[0]);
// iObj[parseInt(rec[2])].click();
// aObj[parseInt(rec[1])].click();
vObj.currentTime=rec[0];
location.reload();
}
};
}
</script>
</div>
</body>
</html>
版权声明：本文标题：mp3测试网站 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1727919139a1138014.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论