先看效果图：

我造了一个audio音乐播放器-QUI-Notes我造了一个audio音乐播放器-QUI-Notes我造了一个audio音乐播放器-QUI-Notes我造了一个audio音乐播放器-QUI-Notes

源码： 

<!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>

源码下载：

下载源码