效果图
audio.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>audio</title> <style> *{margin:0;padding:0;list-style: none;} /*设置margin时不要忘了考虑border*/ .outerNode{width:505px;height:406px;position: absolute;top:50%;margin-top:-204px;left:50%;margin-left:-253.5px;border:1px solid #a6a18d;border-radius:8px;box-shadow:0 0 16px #bdbab1;} .innerNode{width:504px;height:405px;border-top:1px solid #e0d0ba;border-left:1px solid #ceccbf;overflow:hidden;border-radius:8px;} /*封面图*/ .topNode{width:100%;height:198px;border-bottom:1px solid #787463;background:url(music/pic/fmt01.jpg) center center;background-size:cover;transition:all .7s;position: relative;} .musicName{position: absolute;left:2px;bottom:5px;color:#fff;} /*进度条*/ .lineNode{width:100%;height:46px;border-top:1px solid #f9f7ee;border-bottom:1px solid #a29d8a;background:url(musicimage/linebg.jpg) repeat-x;} .progressNode{width:440px;height:18px;margin:13px 0 0 28px;background:url(musicimage/progressbg.jpg) repeat-x;position: relative;} .progressLeft{width:7px;height:100%;position: absolute;left:0;background:url(musicimage/leftNode.jpg);} .progressRight{width:7px;height:100%;position: absolute;right:0;background:url(musicimage/rightNode.jpg);} .trueLine{position: absolute;top:2px;left:3px;width:0%;height:12px;background:url(musicimage/green_bg.png) repeat-x;border-radius: 6px;border-right:1px solid #787463;} /*控件*/ .bottomNode{width:100%;height:157px;border-bottom:1px solid #7e7670;background:url(musicimage/bottombg.jpg);position: relative;} /*定位时记得考虑减去元素阴影的宽高*/ .lastNode{width:75px;height:74px;position: absolute;top:39px;left:118px;background:url(musicimage/lastBg.png);cursor:pointer;} .playNode{width:95px;height:94px;position: absolute;top:29px;left:202px;background:url(musicimage/playNode.png);cursor:pointer;} .nextNode{width:75px;height:74px;position: absolute;top:39px;left:306px;background:url(musicimage/rightBg.png);cursor:pointer;} .volumeNode{width:37px;height:32px;position: absolute;top:58px;right:43px;background:url(musicimage/volume.png);cursor:pointer;} .no_volume{width:37px;height:32px;position: absolute;top:58px;right:43px;background:url(musicimage/no_volume.png);cursor:pointer;} </style> </head> <body> <div class="outerNode"> <div class="innerNode"> <!-- 封面图 --> <div class="topNode"> <div class="musicName"></div> </div> <!-- 进度条 --> <div class="lineNode"> <div class="progressNode"> <div class="progressLeft"></div> <div class="progressRight"></div> <!-- 真正的进度条 --> <div class="trueLine"></div> </div> </div> <!-- 控件元素 --> <div class="bottomNode"> <div class="lastNode"></div> <div class="playNode"></div> <div class="nextNode"></div> <div class="volumeNode"></div> </div> </div> </div> <script> var audio=new Audio(); // 播放暂停 var playNode=document.querySelector(".playNode"); var isPlay=false; playNode.onclick=function(){ if(isPlay===false){ audio.play(); }else{ audio.pause(); } isPlay=!isPlay; } // 是否静音 var volumeNode=document.querySelector(".volumeNode"); var isMuted=false; volumeNode.onclick=function(){ isMuted=!isMuted; if(isMuted===false){ audio.volume=1; this.className="volumeNode"; }else{ audio.volume=0; this.className="no_volume"; } } // 音乐播放，进度条移动 var trueLine=document.querySelector(".trueLine"); audio.addEventListener("timeupdate",function(){ trueLine.style.width=audio.currentTime/audio.duration*100+"%"; }) //手动控制进度条 var progressNode=document.querySelector(".progressNode"); var outerNode=document.querySelector(".outerNode"); progressNode.onclick=function(e){ var ev=e||event; var percent=(ev.clientX-(this.offsetLeft+outerNode.offsetLeft))/this.offsetWidth; audio.currentTime=audio.duration*percent; trueLine.style.width=percent*100+"%"; } //上下首歌切换 let allMusic=[{ "musicSrc":"music/mus/AcousticGuitar1.mp3", "musicPic":"music/pic/fmt01.jpg", "musicName":"AcousticGuitar1" },{ "musicSrc":"music/mus/AmazingGrace.mp3", "musicPic":"music/pic/fmt02.png", "musicName":"AmazingGrace" },{ "musicSrc":"music/mus/FeelsGood2B.mp3", "musicPic":"music/pic/fmt03.jpg", "musicName":"FeelsGood2B" },{ "musicSrc":"music/mus/FunBusyIntro.mp3", "musicPic":"music/pic/fmt04.jpg", "musicName":"FunBusyIntro" },{ "musicSrc":"music/mus/GreenDaze.mp3", "musicPic":"music/pic/fmt05.jpg", "musicName":"GreenDaze" },{ "musicSrc":"music/mus/Limosine.mp3", "musicPic":"music/pic/fmt06.jpg", "musicName":"Limosine" }]; var index=0; var topNode=document.querySelector(".topNode"); var musicName=document.querySelector(".musicName"); toggleMusic(index); var lastNode=document.querySelector(".lastNode"); var nextNode=document.querySelector(".nextNode"); lastNode.onclick=function(){ index--; index=index<0?allMusic.length-1:index; toggleMusic(index); } nextNode.onclick=function(){ index++; index=index>allMusic.length-1?0:index; toggleMusic(index); } function toggleMusic(index){ audio.src=allMusic[index].musicSrc; audio.currentTime=0; if(isPlay===true){ audio.play(); }else{ audio.pause(); } topNode.style.backgroundImage="url("+allMusic[index].musicPic+")"; trueLine.style.width="0%"; musicName.innerHTML=allMusic[index].musicName; } </script> </body> </html>