先看效果圖：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>音頻播放器</title>
</head>
<style type="text/css">
audio{display: none;}
div,ul,li{list-style: none;margin: 0;padding: 0;}.corff{color: #fff;}.coree{color: #eee;}.cor33{color: #333333;}
.box{width: 240px;height: 420px;position: relative;box-shadow: 2px 2px 8px 3px rgba(0,0,0,.15);border-radius: 20px;overflow: hidden;}
.f16{font-size: 16px;}.f12{font-size: 12px;}.f14{font-size: 14px;}
.auto{margin: 0 auto;}
.musicbox{width:100%;height: 100%;background:linear-gradient(to bottom,#fff 20%,#111 60%,#000 100%);position: relative;z-index: 1;}
.musicbg{width: 240px;height: 200px;border-radius: 0 0 40px 40px;background: url(../img/01.jpg) no-repeat;background-size: cover;}
.blur{position: relative;}
.blur:before{content: "";display: block;background: inherit;filter: blur(5px);position: absolute;width: 100%;height: 100%;top: 10px;left: 0px;z-index: -1;opacity: 0.4;transform-origin: 0 0;border-radius: inherit;transform: scale(1, 1);}
.musiclist h1{padding: 6px 15px;font-weight: 500;display: flex; justify-content: space-between;}
.musiclist ul{width: 100%;height: 100px;overflow-x: hidden;overflow-y: scroll;}
.musiclist ul::-webkit-scrollbar {display:none}
.musiclist ul li{padding: 0px 15px;width: calc(100% - 30px);float: left;display: flex; justify-content: space-between;line-height: 30px;cursor: pointer;}
.musicAudio{padding: 10px 15px 0 15px;width: calc(100% - 30px);height: 50px;border-radius: 10px 10px 0 0;background: #fff;position: absolute;bottom: 0;left: 0;right: 0;z-index: 3;overflow: hidden;}
.musicAudio:before{content: "";width: 40px;height: 2px;background: #242424;position: absolute;top: 3px;z-index: 1;left: 50%;transform: translateX(-50%);}
.leftmusic{float: left;width: 80%;height: 40px;margin-top: 5px;overflow: hidden;display: flex;justify-content: flex-start;cursor: pointer;}
.musicimg img{width: 40px;height: 40px;border-radius: 5px;}
.musicinfo{margin-left: 10px;width: calc(100% - 40px);}.musicinfo h3,.musicinfo p{margin: 0;padding: 0;}
.circlePre{width: 40px;height: 40px;margin-top: 5px;position: relative;background: conic-gradient(red 0% 0%,#eee 0% 100%);overflow: hidden;border-radius: 40px;position: relative;}
.cir-playicon{width: 36px;height:36px;border-radius: 40px;background: #fff;position: absolute;z-index: 1;left: 2px;top: 2px;}
#circleVal .play{width: 36px;height: 36px;background-color: #fff;background: url(../img/play.png) 10px 8px /20px no-repeat;}
#circleVal .stop{width: 36px;height: 36px;background-color: #fff;background: url(../img/stop.png) 8px 8px /20px no-repeat;}
.musicpage{width: 100%;height: 100%;position: absolute;z-index:4;top: 100%;left: 0;background: rgba(0,0,0,.25);}
.music{width:calc(100% - 50px) ;padding: 0 25px;height: 300px;position: absolute;z-index: 6;bottom: 0;left: 0;background: #fff;border-radius: 35px 35px 0 0;}
.pregress{width: 100%;height: 6px;position: relative;border-radius: 4px;overflow: hidden;margin: 20px 0;}
.prebg{width: 100%;height: 6px;position: absolute;z-index: 0;background: #eee;}
.preval{width: 20%;height:6px;position: absolute;z-index: 2;background: red;}
.operbox{width: 100%;padding: 20px 0;position:relative;}
.playicon{width: 50px;height: 50px;border-radius: 50%;background: #fff;box-shadow:0 1px 4px 3px rgba(0,0,0,.048);text-align: center;float: left;cursor: pointer;}
.play{width: 50px;height: 50px;background: url(../img/play.png) 15px 13px /25px no-repeat;}
.stop{width: 50px;height: 50px;background: url(../img/stop.png) 12px 12px /25px no-repeat;}
.playicon img{width: 24px;height: 24px;margin-top: 12px;}
.playicon:nth-of-type(2){margin: 0 20px;}
.musicimgs{width: 100%;text-align: center;margin-top: -50px;}
.musicimgs img{width: 80px;height: 100px;border-radius:15px;margin: 0 auto;box-shadow: 0px 2px 3px 3px rgba(0,0,0,.055)}
.music .musicinfo{width: 100%;height: auto;padding: 15px 0;overflow: hidden;margin: 0;}
#close{width: 100%;text-align: center;font-size: 12px;color: #999;position: absolute;bottom: 0;left: 0;cursor: pointer;}
.bg33{background: #c52f2f;}
</style>
<body>
<audio controls preload="auto" src="../img/ceshi.mp3" id="audio" muted="muted" autoplay="flase"></audio>
<div class="box auto">
<div class="musicbox">
<div class="musicbg blur"></div>
<div class="musiclist">
<h1 class="f16 corff"><span>熱門單曲</span><span>全部</span></h1>
<ul id="mlist"></ul>
</div>
<div class="musicAudio">
<div class="leftmusic">
<div class="musicimg">
<img class="mp3bg" src="../module/trans_roll/img/a1.png" alt=""/>
</div>
<div class="musicinfo">
<h3 class="f16 cor33 musicName" >無播放</h3>
<p class="f12 cor33 musicAuther">無</p>
</div>
</div>
<div class="circlePre" id="circleVal">
<div class="cir-playicon">
<div class="play" id="icon2" flag="0"></div>
</div>
</div>
</div>
</div>
<div class="musicpage">
<div class="music">
<div class="musicimgs">
<img class="mp3bgp" src="../module/trans_roll/img/a1.png"/>
</div>
<div class="musicinfo">
<h3 class="f16 cor33 musicNamep">無播放</h3>
<p class="f12 cor33 musicAutherp">無</p>
</div>
<div class="pregress">
<div class="preval" style="width: 0;"></div>
<div class="prebg"></div>
</div>
<div class="operbox">
<div class="pre playicon" id="pre">
<img src="../img/left.png" alt="" />
</div>
<div class="playicon">
<div class="icon play" id="icon" flag="0"></div>
</div>
<div class="next playicon" id="next">
<img src="../img/right.png" alt="" />
</div>
</div>
<p id="close"> 折疊>> </p>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function (){
var musicbox = document.getElementsByClassName("musicbox")[0];
var musicpage = document.getElementsByClassName("musicpage")[0];
var closebtn = document.getElementById("close");
var leftmusic = document.getElementsByClassName("leftmusic")[0];
var mlist = document.getElementById("mlist");
var audioDatas = [
{name:"張三的歌",auther:"張三",urls:"../img/ceshi.mp3",mp3bg:"../module/trans_roll/img/a1.png"},
{name:"哈嘿嘿",auther:"陳一發",urls:"../img/ceshi.mp3",mp3bg:"../module/trans_roll/img/a2.png"},
{name:"哈哈哈",auther:"王二浪",urls:"../img/ceshi.mp3",mp3bg:"../module/trans_roll/img/a4.png"},
{name:"關于鄭州的記憶",auther:"李志",urls:"../img/1.mp3",mp3bg:"../module/trans_roll/img/a3.png"}
]
var myaudio = document.getElementById("audio");
var icon = document.getElementById("icon");
var icon2 = document.getElementById("icon2");
var pre = document.getElementById("pre");
var next = document.getElementById("next");
var preval = document.getElementsByClassName("preval")[0];
var operbox = document.getElementsByClassName("operbox")[0];
var circleVal = document.getElementById("circleVal");
var playedTime = myaudio.currentTime;
var playedVol = myaudio.volume;
var playedRate = myaudio.playbackRate;
var preV = audioCur = val = 0;
var listcur = -1;
var datal = audioDatas.length;
var timer,flag,all,m,s,time;//定義計數器
for(var i = 0 ;i<audioDatas.length;i++){//周遊清單
let li = document.createElement('li')
li.innerHTML = "<span class='f14 corff'>"+audioDatas[i].name+"</span><span class='f12 coree'>"+audioDatas[i].auther+"</span>";
mlist.appendChild(li);
mlist.children[i].index = i;
mlist.children[i].onclick = function(){
for (let j=0;j< audioDatas.length;j++) {
mlist.children[j].className="";
}
clearInterval(timer)
mlist.children[this.index].className="bg33";
audioCur = this.index;
init();
changeMusic(audioCur);
}
}
var Timer={
start:function(){
timer = setInterval(function(){
pregress()
},1000);
},
stop:function(){
clearInterval(timer)
}
}
var ChangeIcon = {
stop:function(id){
id.setAttribute('class','icon stop')
},
play:function(id){
id.setAttribute('class',"icon play")
}
}
closebtn.onclick = function(){
musicpage.style.top = "100%";
musicbox.style="";
}
leftmusic.onclick = function(){
musicpage.style.top = "0%";
musicbox.style="filter: blur(5px)";
}
function init(){
return setTimeout(function(){
all = myaudio.duration;//擷取總時長
m = parseInt(myaudio.duration/60);//計算分鐘數
s = Math.floor(all-m*60);//計算剩餘秒數
time = m+":"+s;//拼接總時長格式
},1000)
}
function setMusic(audioCur){
myaudio.setAttribute('src',audioDatas[audioCur].urls);
document.getElementsByClassName("musicAutherp")[0].innerHTML = audioDatas[audioCur].auther;
document.getElementsByClassName("musicAuther")[0].innerHTML = audioDatas[audioCur].auther;
document.getElementsByClassName("musicNamep")[0].innerHTML = audioDatas[audioCur].name;
document.getElementsByClassName("musicName")[0].innerHTML = audioDatas[audioCur].name;
document.getElementsByClassName("mp3bgp")[0].setAttribute("src",audioDatas[audioCur].mp3bg);
document.getElementsByClassName("mp3bg")[0].setAttribute("src",audioDatas[audioCur].mp3bg);
}
function pointMove(val){
point.style = "transform: rotate("+val+"deg)";
}
function cicleV(val){
circleVal.style = "background: conic-gradient(red 0% "+val+",#eee "+val+" 100%)";
}
function changeMusic(audioCur){
setMusic(audioCur);
preV = 0;
playing();
}
function playing(){
icon.setAttribute('flag',1);
myaudio.play();
Timer.start();
ChangeIcon.stop(icon);
ChangeIcon.stop(icon2);
}
function stoped(){
icon.setAttribute('flag',0);
myaudio.pause();
Timer.stop();
ChangeIcon.play(icon);
ChangeIcon.play(icon2);
}
function pregress(){
if(preV !==all){
preV = preV < all?preV+1:all;
}else{
preV = 0;
stoped();
}
let pregress = preV/all*100+"%";
preval.style.width = pregress;
cicleV(pregress);
}
icon.onclick = function(){//播放/暫停切換
flag = icon.getAttribute("flag");
flag == 0?playing():stoped();
myaudio.paused?console.log("已暫停"):console.log("播放中");
}
icon2.onclick = function(){//播放/暫停切換
flag = icon.getAttribute("flag");
flag == 0?playing():stoped();
myaudio.paused?console.log("已暫停"):console.log("播放中");
}
pre.onclick = function(){
audioCur = audioCur>0?audioCur-1:0;
changeMusic(audioCur)
}
next.onclick = function(){
audioCur = audioCur<datal-1?audioCur+1:datal-1;
changeMusic(audioCur)
}
}
</script>
</body>
</html>