简易网页音乐播放器
作业，怕丢，大家不用复制，有图片和音乐不在里面，用不了
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
#div1{/*大背景*/
border: 0px solid red;
width: 100%;
height: 600px;
background: white;
}
#div2{/*播放器*/
border: 0px solid green;
width: 500px;
height: 600px;
position: absolute;
background: rgb(247,238,241);/*#E0E0E0;*/
border-radius: 20px;
overflow: hidden;
z-index: 10;
box-shadow: 0 0 10px 3px grey;
}
#div3{/*音乐列表*/
border: 0px solid green;
width: 320px;
height: 590px;
background: #BDBABA;
margin-top: 0px;
margin-left: 180px;
border-radius: 5px;
overflow: auto;
overflow-y: scroll;
-webkit-transition:all 0.2s ease-in-out;
opacity: 0;
}
#div4{/*进度条*/
border: 0px solid black;
width: 100%;
height: 30px;
float: left;
}
.songlist{
width: 90%;
height: 20px;
border: 0px solid white;
color: white;
font-family: 微软雅黑;
font-size: 15px;
cursor: pointer;
margin-top: 1px;
}
.sbtn:hover{
-weikit-transition: all 3s ease-in-out;
box-shadow: 0 0 5px 1px black;
border-radius: 10px;
overflow: hidden;
}
.css1{
border: 0px solid red;
float: left;
width: 300px;
height: 25px;
/*background: yellow;*/
margin-top: 3px;
margin-left: 3px;
}
.css2{
float: left;
width:200px;
border: 0px solid green;
color: white;/*音乐列表文字颜色*/
font-family: 微软雅黑;
}
#audio1{
background:url("22.png");
background-repeat: no-repeat;
background-size: 90% 100%;
background-position: center;
/*-webkit-animation:rotator 3s linear infinite;*/
}
#gm{
border: 0px solid black;
width: 100%;
height: 50px;
margin-top: 10px;
font-family: 微软雅黑;
font-size: 30px;
}
#jdt{
border: 0px solid green;
border-radius: 5px;
background:#ccc;
width: 370px;
height: 5px;
float: left;
cursor: pointer;
margin-left: 60px;
margin-top: -10px;
overflow: hidden;
}
#jdtn{
width: 370px;
float: left;
height: 5px;
border-radius: 3px;
margin-left: -370px;
margin-top: 0px;
cursor: pointer;
background-color:hotpink;
}
#starttime{
border: 0px solid red;
width: 50px;
height: 20px;
margin-top: 10px;
margin-left: 10px;
}
#endtime{
border: 0px solid red;
width: 50px;
height: 20px;
margin-left: 440px;
margin-top: -20px;
}
#div5{
border: 0px solid red;
width: 100%;
height: 20px;
margin-top: -90px;
}
#vic{
border: 0px solid green;
border-radius: 5px;
background:#ccc;
width: 370px;
height: 4px;
margin-left: 0px;
margin-top: 10px;
cursor: pointer;
overflow: hidden;
}
#vicc{
width: 370px;
height: 4px;
border-radius: 2px;
float: left;
margin-left: 0px;
margin-top: 0px;
cursor: pointer;
background-color:hotpink;
}
#imgv{
position: absolute;
height: 40px;
width: 40px;
border: 0px solid black;
background: url("0.png");
background-repeat: no-repeat;
background-size:100% 100%;
top: 50px;
left: 10px;
}
#imgv:hover{
-weikit-transition: all 3s ease-in-out;
box-shadow: 0 0 5px 1px black;
border-radius: 10px;
overflow: hidden;
}
.xh:hover{
-weikit-transition: all 3s ease-in-out;
box-shadow: 0 0 5px 1px black;
border-radius: 10px;
overflow: hidden;
}
.css9{
color: white;
border: 0px solid yellow;
margin-left: 200px;
width: 50px;
}
.img123{
background-repeat: no-repeat;
background-size: 50% 50%;
border: 0px solid blue;
margin-left: 260px;
margin-top: -30px;
width: 38px;
height: 39px;
}
</style>
<body>
<div id="div1">
<div id="div2" ><!---------------------音乐播放器-------------------------------->
<table width="500" height="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="5" height="50" align="center"><div id="gm">请点击歌曲.mp3</div></td>
</tr>
<tr>
<td colspan="5" align="center" valign="middle" id="audio1">
<div id="imgv" onClick="mutevic()"></div>
<div id="div7" style="width: 72px;height: 310px;border: 0px solid black;position: absolute;z-index: 40;border-radius: 5px;background: rgb(247,238,241);top: 180px;left:0px;box-shadow: 0 0 5px 1px black;opacity: 0;overflow: hidden;">
<div id="xh1" class="xh" onClick="dqxh()" onMouseDown="xhdown(this)" onMouseUp="xhup(this)"><img id="dqxh" src="2.png"></div>
<div id="xh2" class="xh" onClick="sjbf()" onMouseDown="xhdown(this)" onMouseUp="xhup(this)"><img id="sjbf" src="1.png"></div>
<div id="xh3" class="xh" onClick="lbxh()" onMouseDown="xhdown(this)" onMouseUp="xhup(this)"><img id="lbxh" src="444.png"></div>
<div id="xh4" class="xh" onClick="lbbxh()" onMouseDown="xhdown(this)" onMouseUp="xhup(this)"><img id="lbxh" src="4.png"></div>
</div>
<div id="div5" align="center"> <!---------------音量控制---------------->
<!-- <div id="imgvic" onClick="imgdishid()"></div>-->
<div id="vic" onMouseDown="vic(this)">
<div id="vicc"></div>
</div>
</div>
<video id="myvideo" src="" width="300" height="300" onCanPlay="jdtt()"></video>
</td>
</tr>
<tr>
<td height="40" colspan="6"><!-------进度条---------->
<div id="div4">
<div id="starttime">00:00</div>
<div id="jdt" onMouseDown="timeleap(this)" onMouseMove="jdtmove()" onMouseUp="jdtup()">
<div id="jdtn"></div>
</div>
<div id="endtime">00:00</div>
</div>
</tr>
<tr >
<!--style="background: url(4.png);background-repeat: no-repeat;" -->
<td width="123" height="80" valign="top" class="sbtn" id="myloop" onClick="loopsong()">
<img id="lpimg" src="4.png">
</td>
<td width="78" height="80" valign="top" class="sbtn" id="before" style="background: url(8.png);background-repeat: no-repeat;" onClick="bfrsong()"> </td>
<td width="74" height="80" valign="top" class="sbtn" id="playpause" style="background: url(7.png);background-repeat: no-repeat;" onClick="playpause(this)"> </td>
<td width="80" height="80" valign="top" class="sbtn" id="after" style="background: url(3.png);background-repeat: no-repeat;" onClick="aftersong()"> </td>
<td colspan="2" width="84" height="80" valign="top" class="sbtn" id="mylist" onClick="listdisplay()">
<img src="444.png" style="margin-left: 40px;">
</td>
<!--<td width="61" height="80" valign="top"></td>-->
</tr>
</tbody>
</table>
</div><!--<div id="x1" class="x" onClick="xremove(this)">X</div>-->
<div id="div3"><!--------音乐列表---------------->
</div>
</div>
<!--<input type="button" value="add" onClick="listdisplay()">-->
</body>
</html>
<script>
window.onload=function(){
var t=localStorage.getItem("tsong");
if(t==null)
usrsong=0;
else
usrsong=localStorage.getItem("tsong")*1;
addmusic();
var sl=document.getElementById("myvideo");
sl.src=localStorage.getItem("ddgm");
sl.currentTime=localStorage.getItem("ddsc");
document.getElementById("gm").innerHTML=localStorage.getItem("ddgmxs");
var arrsong=document.getElementsByClassName("css2");
for(i=0;i<arrsong.length;i++){
if(arrsong[i].innerHTML==document.getElementById("gm").innerHTML){
tempsong=i;
arrsong[i].style.color="red";
}
}
lbbxh();
}
var ddct=0;
var t=-370;
var tempsong=0;
var tempbefore;
var loopy=0;
var btn=0;
var currentt=0;
var ddsj=0;
var ddgm;
var dd=document.getElementsByClassName("css2");
var ddpd=0;
function lbbxh(){/列表不循环
document.getElementById("lpimg").src="4.png";
var sl=document.getElementById("myvideo");
if(loopy==2){//阻止之前的单曲循环
sl.loop=false;
window.clearTimeout(l2);
}
if(loopy==3)//阻止随机播放
window.clearTimeout(l3);
if(loopy==1)//阻止列表循环
window.clearTimeout(l1);
if(sl.ended==true)
aftersong();
loopy=4;
var arrsong=document.getElementsByClassName("css2");
if(arrsong[arrsong.length-1].innerText==document.getElementById("gm").innerText){
//alert(sl.duration)
if(parseInt(sl.duration)==parseInt(sl.currentTime)){
sl.src="";
sl.pause();
document.getElementById("endtime").innerHTML=0;
}
}
l4=setTimeout(lbbxh,10);
}
function jdtup(){
var sl=document.getElementById("myvideo");
var et=parseInt(sl.duration);//时间总长度
if(btn==1){
btn=3;
currentt=sl.currentTime;
}
}
function jdtmove(){
var sl=document.getElementById("myvideo");
var et=parseInt(sl.duration);//时间总长度
//var ft=parseInt(sl.currentTime);//当前时间
var x=event.clientX;//鼠标位置
var vt=et/370;//1px需要多少秒
var len=-370+(x-70);//鼠标点击时进度条的长度
var tmptime=(x-70)*vt;//鼠标点击时，应该是多少秒
if(btn==1){
document.title=event.clientX;
document.getElementById("jdtn").style.marginLeft=len+"px";//当前长度
sl.currentTime=tmptime;//当前时间
}
if(btn==3){
sl.currentTime=currentt;
btn=0;
}
}
function xhdown(obj){
obj.style.border="2px solid red";
}
function xhup(obj){
obj.style.border="0px solid red";
document.getElementById("div7").style.opacity="0";
}
function loopsong(){
if(document.getElementById("div7").style.opacity=="0")
document.getElementById("div7").style.opacity="1";
else
document.getElementById("div7").style.opacity="0";
}
function lbxh(){//列表循环------------------------------------------
document.getElementById("lpimg").src="444.png"
var sl=document.getElementById("myvideo");
if(sl.loop==true){//阻止之前的单曲循环
sl.loop=false;
window.clearTimeout(l2);
}
if(loopy==3)//阻止随机播放
window.clearTimeout(l3);
if(loopy==4)//阻止列表不循环
window.clearTimeout(l4);
var a=document.getElementsByClassName("css2");
var nowgm=document.getElementById("gm").innerHTML;
if(sl.ended==true){
var a=document.getElementsByClassName("css2");
for(i=0;i<a.length;i++){
a[i].style.color="white";
if(a[i].innerHTML==nowgm)
var p=i+1;//取下一首的坐标
if(p==a.length){//到最后一首的时候跳到第一首。
p=0;
}
}
document.getElementById("gm").innerHTML=a[p].innerHTML;
sl.src=a[p].innerHTML;
sl.play();
a[p].style.color="red";
}
//aftersong();
l1=setTimeout(lbxh,10);
loopy=1;
}
function dqxh(){//单曲循环-------------------------------------------
var sl=document.getElementById("myvideo");
document.getElementById("lpimg").src="2.png"
if(loopy==3)//阻止随机播放
window.clearTimeout(l3);
if(loopy==4)//阻止列表不循环
window.clearTimeout(l4);
if(loopy==1)//阻止列表循环
window.clearTimeout(l1);
l2=setTimeout(dqxh,10);
sl.loop=true;
loopy=2;
}
function sjbf(){//随机播放--------------------------------------
var sl=document.getElementById("myvideo");
document.getElementById("lpimg").src="1.png"
if(sl.loop==true){//阻止之前的单曲循环
sl.loop=false;
window.clearTimeout(l2);
}
if(loopy==1)//阻止列表循环
window.clearTimeout(l1);
if(loopy==4)//阻止列表不循环
window.clearTimeout(l4);
if(sl.ended==true){
var a=document.getElementsByClassName("css2");
for(i=0;i<a.length;i++){
a[i].style.color="white";
}
var b=Math.floor(Math.random()*a.length)//0-29的随机数
document.getElementById("gm").innerHTML=a[b].innerHTML;
sl.src=a[b].innerHTML;
sl.play();
a[b].style.color="red";
}
l3=setTimeout(sjbf,10);
loopy=3;
}
function timeleap(obj){//控制进度条的时间-------------++++++++++++++++++++
var sl=document.getElementById("myvideo");
var et=parseInt(sl.duration);
var ft=parseInt(sl.currentTime);
var x=event.clientX;//鼠标位置
var vt=et/370;//1px需要多少秒
var len=-370+(x-70);//鼠标点击时进度条的长度
var tmptime=(x-70)*vt;//鼠标点击时，应该是多少秒
document.getElementById("jdtn").style.marginLeft=len+"px";
sl.currentTime=tmptime;
btn=1;
}
var tmpvic;
var tmpvicx;
function vic(obj){//总长度370，初始位置70,粉条初始位置-370
var sl=document.getElementById("myvideo");
var x=event.clientX;//鼠标位置
var y=(x-70)/370;//占总长度的百分比
sl.volume=y;//赋值给volume
var z=-370+(x-70);
tmpvic=y;
tmpvicx=z;
document.getElementById("vicc").style.marginLeft=z+"px";
document.getElementById("imgv").style.background="url(0.png)";
document.getElementById("imgv").style.backgroundRepeat="no-repeat";
document.getElementById("imgv").style.backgroundSize="100% 100%";
}
function mutevic(){//background-repeat: no-repeat;background-size:100% 100%;
var sl=document.getElementById("myvideo");
if(sl.volume>0){
document.getElementById("imgv").style.background="url(00.png)";
document.getElementById("imgv").style.backgroundRepeat="no-repeat";
document.getElementById("imgv").style.backgroundSize="100% 100%";
document.getElementById("vicc").style.marginLeft="-370px";
sl.volume=0;
}
else{
document.getElementById("imgv").style.background="url(0.png)";
document.getElementById("imgv").style.backgroundRepeat="no-repeat";
document.getElementById("imgv").style.backgroundSize="100% 100%";
document.getElementById("vicc").style.marginLeft="0px";
sl.volume=tmpvic;
document.getElementById("vicc").style.marginLeft=tmpvicx+"px";
}
}
function jdtt(){//进度条函数
var sl=document.getElementById("myvideo");
localStorage.setItem("ddgm",sl.src);
localStorage.setItem("ddsc",sl.currentTime);
localStorage.setItem("ddgmxs",document.getElementById("gm").innerHTML);
var et=parseInt(sl.duration);
var stt=timeFormatter(parseInt(sl.currentTime));
var ett=timeFormatter(parseInt(sl.duration));
document.getElementById("starttime").innerHTML=stt;//当前时间赋值
document.getElementById("endtime").innerHTML=ett;//总时间赋值
dian=370/et;//1秒走多少px
var nowctime=sl.currentTime;
var templen=nowctime*dian//当前时间走了多少px
var nowlen=-370+templen;
t=t+dian;
document.getElementById("jdtn").style.marginLeft=nowlen+"px";
if(document.getElementById("jdtn").style.marginLeft==0)
t=-370;
var arrsong=document.getElementsByClassName("css2");
for(i=0;i<arrsong.length;i++){
if(document.getElementById("gm").innerHTML==arrsong[i].innerHTML){
localStorage.setItem("dddd"+i,arrsong[i].innerHTML);//断点歌名
localStorage.setItem("ddddt"+i,parseInt(sl.currentTime));//断点时间
localStorage.setItem("ddddd"+i,parseInt(sl.duration));//断点总时间
document.title=localStorage.getItem("dddd"+i)+","+localStorage.getItem("ddddt"+i);
}
}
setTimeout(jdtt,1000);
}
function playpause(obj){//暂停，开始
var ss=document.getElementById("myvideo");
if(document.getElementById("gm").innerHTML==""){
var arrsong=document.getElementsByClassName("css2");
ss.src=arrsong[0].innerHTML;
arrsong[0].style.color="red";
document.getElementById("gm").innerHTML=arrsong[0].innerHTML;
}
var arrsong=document.getElementsByClassName("css2");
if(ss.src==""){
ss.src=arrsong[0].src;
}
if(ss.paused){
ss.play();
obj.style.background="url(5.png)";
obj.style.backgroundRepeat="no-repeat";
}
else{
ss.pause();
obj.style.background="url(7.png)";
obj.style.backgroundRepeat="no-repeat";
}
}
function changesong(obj){//选中播放-------------------------------------------------
/*var arrsong=document.getElementsByClassName("css2");
*/
var arrsong=document.getElementsByClassName("css2");
for(i=0;i<arrsong.length;i++){
arrsong[i].style.color="white";
}
document.getElementById("playpause").style.background="url(5.png)";
var sl=document.getElementById("myvideo");
sl.src=obj.innerHTML;
for(i=0;i<arrsong.length;i++){提取断点时间
if(obj.innerHTML==arrsong[i].innerHTML){
ddct=localStorage.getItem("ddddt"+i);//提取断点时间
if(ddct==localStorage.getItem("ddddd"+i)){//如果听完了，就从零开始
ddct=0;
}
}
}
document.getElementById("gm").innerHTML=obj.innerHTML;
sl.currentTime=ddct;
sl.play();
obj.style.color="red";
for(i=0;i<arrsong.length;i++){//定位播放的id在数组的位置
if(arrsong[i].style.color=="red")
tempsong=i;//当前歌曲的下标值
}
alert(document.getElementById("dd1").value);
}
function aftersong(){//下一首
/*if(tempsong==0){
tempsong=a;
}*/
document.getElementById("playpause").style.background="url(5.png)";//若是暂停时，按下一首直接变成播放按钮。
var arrsong=document.getElementsByClassName("css2");
var sl=document.getElementById("myvideo");
for(i=0;i<arrsong.length;i++){
arrsong[i].style.color="white";//变白
}
nextsong=tempsong+1;//下首歌的下标值为当前值+1
if(nextsong==arrsong.length){//到最后一首的时候跳到第一首。
nextsong=0;
}
var nsid=arrsong[nextsong];//由于有可能删除，所以用数组控制。
sl.src=nsid.innerText;
for(i=0;i<arrsong.length;i++){提取断点时间
if(nsid.innerText==arrsong[i].innerHTML){
//alert("a");
ddct=localStorage.getItem("ddddt"+i);//提取断点时间
if(ddct==localStorage.getItem("ddddd"+i)){//如果听完了，就从零开始
ddct=0;
}
}
}
document.getElementById("gm").innerHTML=nsid.innerText;
sl.play();
sl.currentTime=ddct;
nsid.style.color="red";
tempsong=nextsong;
//alert("a")
//tempbefore=nsid.id;
}
function bfrsong(){//上一首
document.getElementById("playpause").style.background="url(5.png)";//若是暂停时，按下一首直接变成播放按钮。
var tbb=0;
var arrsong=document.getElementsByClassName("css2");
var sl=document.getElementById("myvideo");
for(i=0;i<arrsong.length;i++){
if(arrsong[i].style.color=="red"){//防止上一首之前的歌被删除
tbb=i;
}
arrsong[i].style.color="white";
}
beforesong=tbb-1;
if(beforesong<0){//到第一首的时候跳到最后一首
beforesong=arrsong.length-1;
}
var bsid=arrsong[beforesong];
//alert(bsid.innerText);
sl.src=bsid.innerText;
for(i=0;i<arrsong.length;i++){提取断点时间
if(bsid.innerText==arrsong[i].innerHTML){
//alert("a");
ddct=localStorage.getItem("ddddt"+i);//提取断点时间
if(ddct==localStorage.getItem("ddddd"+i)){//如果听完了，就从零开始
ddct=0;
}
}
}
document.getElementById("gm").innerHTML=bsid.innerText;
sl.play();
sl.currentTime=ddct;
bsid.style.color="red";
tempsong=beforesong;
//tempbefore=bsid.id;
//alert(tempsong);
}
function addmusic(){//导入音乐列表
var initdd=-1
var tmpmenu=document.getElementById("div3");
var t=localStorage.getItem("tsong");
for(i=1;i<=usrsong;i++){
var tt=localStorage.getItem("tgm"+i);
var timesong=localStorage.getItem("mTime"+i);
timesong=parseInt(timesong);
timesong=timeFormatter(timesong)
var div1=document.createElement("div");
var div2=document.createElement("div");
var div9=document.createElement("div");
var div8=document.createElement("div");
var text1=document.createTextNode(tt);
var text2=document.createTextNode(timesong);
var text3=document.createTextNode(initdd);
var img1=document.createElement("div");
img1.className="img123";
div1.id="M"+i;
div1.className="css1";
div2.id="M"+i+"_Text";
div2.className="css2";
div2.style.cursor="pointer";
div2.addEventListener("click",changesong.bind(this,div2));
div9.id="t"+i;
div9.className="css9";
div8.id="dd"+i;
div8.className="ddclass";
div2.appendChild(text1);
div9.appendChild(text2);
div8.appendChild(text3);
div1.appendChild(div2);
div1.appendChild(div9);
img1.style.background="url(3_1.png)";
img1.id="M"+i+"_close";
img1.addEventListener("click",removeMusic.bind(this,img1));
div1.appendChild(img1);
tmpmenu.appendChild(div1);
}
}
function removeMusic(obj){//删除某个音乐
var removenode=document.getElementById(obj.id.substring(0,obj.id.indexOf("_")));
document.getElementById("div3").removeChild(removenode);
}
function listdisplay(){
if(document.getElementById("div3").style.opacity=="1"){
document.getElementById("div3").style.marginLeft="180px";
document.getElementById("div3").style.opacity="0";
}
else{
document.getElementById("div3").style.marginLeft="505px";
document.getElementById("div3").style.opacity="1";
}
}
function starttime(){
/*var ss=document.getElementById("myvideo");
var st=timeFormatter(parseInt(ss.currentTime));
var et=timeFormatter(parseInt(ss.duration));
document.getElementById("starttime").innerHTML=st;
document.getElementById("endtime").innerHTML=et; */
}
function timeFormatter(duration) {//秒转换成分秒
let secondTime = parseInt(duration);
let minuteTime = 0;
let hourTime = 0;
if (secondTime > 60) {
minuteTime = parseInt(secondTime/60);
secondTime = parseInt(secondTime%60)
if (minuteTime > 60) {
hourTime = parseInt(minuteTime/60);
minuteTime = parseInt(minuteTime%60);
}
}
let result=secondTime>9?secondTime:('0'+secondTime);
if (minuteTime>0) {
result=(minuteTime>9?minuteTime:('0'+minuteTime))+":"+result;
}else{
result = "00" + ":" + result;
}
if(hourTime>0) {
result=(hourTime>9?hourTime:('0'+hourTime))+":"+result;
}else{
result=/*"00"+":"+*/result;
}
return result;
}
</script>
1120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
