js+audio实现音乐播放器

2023-07-16 19:14:04 63

*{ margin:0; padding:0; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; } body{ overflow-x:hidden; } .music_bg{ width:100%; height:666px; position:absolute; background-image:url(../img/bj.jpg); background-position:center; background-size:cover; background-repeat:no-repeat; } .music_cont{ width:300px; height:300px; position:absolute; top:50%; left:50%; margin:-150px00-150px; background-color:#000; border-radius:10px; box-shadow:#0000005px5px30px5px } .music_line{ width:300px; height:20px; overflow:hidden; position:absolute; top:30%; } .line1{ width:0%; height:60%; float:left; margin-top:1%; margin-right:-2px; background-color:rgba(255,255,255,0.9); } .line2{ background-image:url(../img/point.png); height:100%; background-repeat:no-repeat; width:10px; background-position:center; float:left; cursor:pointer; margin-left:-4px; margin-right:-4px; } .music_ctrl{ width:300px; height:200px; position:absolute; bottom:0; background-color:#8c3232; } .music_btn{ width:300px; height:100px; position:relative; } .btn{ width:33.33%; float:left; height:40px; margin-top:50px; } .previmg{ float:right; margin:10px0px; cursor:pointer; } .playimg{ margin:2px35px; cursor:pointer; } .nextimg{ float:left; margin:10px0px; cursor:pointer; } .music_name{ width:300px; height:100px; position:relative; text-align:center; line-height:100px; color:#fff; font-size:18px; }

//定义索引和定时器 varindex=0, timer=null; //获取到要操作的对象 varprev=document.getElementById("prev"); varplay=document.getElementById("play"); varnext=document.getElementById("next"); varaudio1=document.getElementById("audio1"); varmusic_name=document.getElementById("music_name"); varline1=document.getElementById("line1"); varline2=document.getElementById("line2"); //定义数组存音频相关资料 varmusic_src=["1.mp3","2.mp3","3.mp3","4.mp3"]; varmusic_title=["白举纲-绅士（live）","魔鬼中的天使","下个路口见","大鱼"]; //进行初始化音频 audio1.src="audio/"+music_src[index]; music_name.innerText=music_title[index]; //按钮是点击事件 play.onclick=function(){ move1();//播放或暂停 }; prev.onclick=function(){ prev1();//上一曲，播放 move1(); } next.onclick=function(){ next1();//下一曲，播放 move1(); } //下一曲的函数 varnext1=function(){//索引+1，初始化改变后的音乐播放界面 if(index==music_src.length-1){ index=0; }else{ index++; } audio1.src="audio/"+music_src[index]; music_name.innerText=music_title[index]; } //上一曲的函数 varprev1=function(){//索引-1，初始化改变后的音乐播放界面 if(index==0){ index=music_src.length-1; }else{ index--; } audio1.src="audio/"+music_src[index]; music_name.innerText=music_title[index]; } //暂停与播放的函数 varmove1=function(){ //判断现在是不是在播放 if(audio1.paused){//没有，播放音乐，改变按钮样式，改变进度条 audio1.play(); play.src="img/play.png"; timer=setInterval(function(){//每500毫秒执行一次 vardrtTime=audio1.duration;//得到音频总时间（如果不放在定时器中会出现下一曲，暂停播放，进度条来回跳动） varcurTime=audio1.currentTime;//获取音频当前播放时间 line1.style.width=(curTime/drtTime)*100+"%";//计算出进度条的长度 if(drtTime==curTime){ next.onclick(); } console.log(drtTime,curTime); },500); }else{//播放，关闭音乐，关闭按钮图标 audio1.pause(); play.src="http://www.haoziyuan.ccimg/pause.png"; clearInterval(timer); } } //拖动进度条改变播放进度 varflag=false;//标记 varmx=null;//距离 line2.onmousedown=function(event){ //改变状态 flag=true; //按下鼠标获取距离 mx=event.pageX-line2.offsetLeft; clearInterval(timer); } document.body.onmousemove=function(event){ //当状态为true时可以获取 if(flag){ //滑块的位置=当前鼠标位置-距离 varx1=event.pageX-mx; //进度条当前长度=滑块位置-进度条的开始坐标值 varx2=x1-line1.offsetLeft; //用进度条当前长度/进度条总长度得到一个小数 varx3=x2/295; //取到小数点后3位 varx4=x3.toFixed(3); if(x4>=0&&x4<1){ //当百分比在0--1之间时才改变进度条长度 line1.style.width=x4*100+"%"; }elseif(x4==1){ next.onclick(); } } } //放开鼠标时，状态改变，当前播放时间改变，启动定时器继续工作 document.body.onmouseup=function(event){ flag=false;//状态改变 varx5=parseInt(line1.style.width)/100;//得到当前进度条的百分比 vardrtTime=audio1.duration;//得到音频总时间 audio1.currentTime=(drtTime*x5).toFixed(0);//改变当前播放时间 timer=setInterval(function(){//定时器重启成功 varcurTime=audio1.currentTime; line1.style.width=(curTime/drtTime)*100+"%"; },500); }

js+audio实现音乐播放器

热门推荐

随机推荐