2023年7月11日发(作者：)

JavaScript实现⾳乐播放器效果

HTML代码

Css代码*{margin:0; padding:0;}.bd{border:1px solid red;}.fl{float: left}.fr{float:right}.mr10{margin-right:10px;}ul{list-style: none;}.clearfix:after{content: ""; height:0; line-height: 0; visibility: hidden;display: block; clear:both;}body{background:#262626; padding:50px 0; color:#fff; }#player{width:600px; height:400px; background:#130519de;margin:0 auto;}#playerControl{position:relative;height:200px;}#playerControl .playerImg{padding:25px; box-sizing: border-box;}/*播放控制界⾯*/#pcontrol{position: absolute;left:300px; top:85px;}#pcontrol button{float:left;margin:0 10px;border:0;outline: none; width:28px; height:28px;background:url("../../images/demo3/") no-repeat}/*暂停*/#pcontrol .play1{background-position: -8px -8px}#pcontrol .play1:hover{background-position: -49px -8px}/*播放*/#pcontrol .play2{background-position: -8px -49px}#pcontrol .play2:hover{background-position: -49px -49px}/*上⼀曲*/#pcontrol .prev{background-position: 0 -112px}#pcontrol .prev:hover{background-position: -30px -112px}/*下⼀曲*/#pcontrol .next{background-position: 0 -141px}#pcontrol .next:hover{background-position: -30px -141px}/*停⽌播放*/#pcontrol .stop{background-position: 0 -84px}#pcontrol .stop:hover{background-position: -30px -84px}/*播放列表*/#playerList{padding:20px 0px}#playerList ul li{padding:10px 20px; }#playerList ul ,#playerList ul li:hover{background:rgba(0, 0, 0, .4);color:#665975;cursor: pointer}/*播放进度*/#progrees{width:550px; height:5px; background:#ccc; margin:0 auto;}#curProgrees{width:0px; height:100%; background:darkolivegreen;}/*播放时间*/#playTime{padding:10px 25px 0px; text-align: right;}Js功能代码 = function (ev) { //获取元素 var play = elector("#play");//播放按钮 var audio = elector("#audio");//⾳频⽂件 var next = elector(".next");//下⼀曲 var prev = elector(".prev");//上⼀曲 var stop = elector(".stop");//停⽌ var playerListLi = electorAll("li")//播放列表li var totalTime = elector("#totalTime");//总时间 var presentTime = elector("#presentTime");//当前时间 //歌曲地址 var playerMusic = ["../video/3","../video/3","../video/3"]; var playerMusic = ["../video/3","../video/3","../video/3"]; //1. 点击播放歌曲，再次点击播放暂停 ntListener("click",startPlay); //2.点击切换下⼀曲 ntListener("click",theNext); //3.点击切换上⼀曲 ntListener("click",thePrev); //4.点击停⽌播放 ntListener("click",stopPlay); //定义播放函数 //1.1 定义标杆，判断是否播放歌曲 var flag = true; function startPlay(){ if(flag){ ame="play2"; = "暂停"; (); //播放进度 playProgress(); //播放时间 playTime(); }else{ ame="play1"; = "播放"; (); } flag = !flag; } //定义下⼀曲 var n = 0;//定义歌曲索引 function theNext(){ n++; if(n == ){ n = 0; } = playerMusic[n]; //歌曲播放 flag = true; startPlay(); //切换列表 switchList(); } //定义下⼀曲 function thePrev(){ n--; if(n < 0){ n = - 1; } = playerMusic[n]; //歌曲播放 flag = true; startPlay(); //切换列表 switchList(); } //切换列表 function switchList(){ for(var i=0; i<; i++){ playerListLi[i].className = ""; } playerListLi[n].className = "active"; } } //停⽌播放 function stopPlay(){ //设置当前播放时间为0;,并暂停播放 tTime = 0; flag = false; startPlay(); } //播放进度 function playProgress(){ //定义计时器 var timer = null; if(flag){ //开启计时器 timer = setInterval(function(){ if(tTime >= on){ = Width + "px"; clearInterval(timer); theNext(); }else{ = (tTime/on)*Width + "px"; } },30); }else{ //关闭计时器 clearInterval(timer); } } //播放时间 function playTime(){ //当前时间 var timer2 = null; if(flag){ timer2 = setInterval(function(){ //总时间 setTime(on,totalTime); setTime(tTime,presentTime); },1000) }else{ clearInterval(timer2) } } //设置时间 function setTime(audioTime,obj){ //总时间 allMinute = (audioTime/60); if(allMinute<10){ allMinute = "0" + allMinute; } allSecond = (audioTime%60); if(allSecond<10){ allSecond = "0" + allSecond; } var allTime = allMinute + " : " + allSecond; TML = allTime; }}