仿网易云网页播放器

注意项：

1.歌曲请自备，开一个文件夹放入，写入数组路径要准确

2.仿网易云的播放器，图标css可去官网挖...(这个就是hhh)

3.在线图标可去阿里图标库拿，布局自己写，主要看JS逻辑，把html和css忽略吧

上JS代码：

<script>
			var oTotal = document.getElementsByClassName("total_time")[0]
			var oAudio = document.getElementById("audio")
			var oPlay = document.getElementById("play")
			var oCircle = document.getElementById("circle")
			var oStart = document.getElementById("start_time")
			var oRound = document.getElementById("round")
			var oLoad = document.getElementById("load")
			
			var oNext = document.getElementsByClassName("icon-xiayishou")[0]
			var oPrev = document.getElementsByClassName("icon-shangyishou")[0]
			var oMus = document.getElementById("music_list")
			var oUl = oMus.getElementsByTagName("ul")[0]
			var oLi = oUl.getElementsByTagName("li")
			
			var oName = document.getElementById("musicName")
			var oBtn = document.getElementById("icon-yinleliebiao")
			var oML = document.getElementById("music_list")
		
			var i = true
			console.log(oLoad.offsetLeft)
			var num = 0
			var arr = ["music/1.mp3","music/2.mp3","music/3.mp3","music/4.mp3"]  //数组存放歌曲
			var arrText = ["My friend","绝不会忘记","幼稚完","明年今日"]  //数组存放歌名
			//初始化
			oAudio.src = arr[num]  
			oName.innerHTML = arrText[num]
			//转换总时长
			oAudio.addEventListener("canplay",function(){
				oTotal.innerHTML = getMin(this.duration)	//获取当前歌曲总时长
			})
			
			//点击开始播放
			oPlay.onclick = function(){
				if(oAudio.paused){  //判断是否在播放
					oAudio.play()
					oPlay.innerHTML = '<i class="iconfontt icon-iconstop"></i>'  //播放中切换暂停图标
					
				}else {
					oAudio.pause()
					oPlay.innerHTML = '<i class="iconfontt icon-bofang"></i>'  //暂停切换可播放图标
				}
			}
			
			//监听进度变化
			oAudio.ontimeupdate = function(){  
				var pre = Math.floor(oAudio.currentTime/oAudio.duration*200)   //歌曲时长转换成进度条200px
				oCircle.style.width = pre+"px"
				oStart.innerHTML = getMin(oAudio.currentTime)  //播放时间监听
				oRound.style.left = oCircle.style.width
			}
			
			//点击进度变化
			oLoad.onclick = function(e){
				var l = e.clientX-oLoad.offsetLeft    //当前点击位置减去进度条到网页左壁的长度
				oAudio.currentTime = (l/200)*oAudio.duration  //获取长度转换进度条百分比
				console.log("2+click")
			}
			//拖拽原点
			oRound.onmousedown = function(e){   //拖拽原理跟点击一样
				document.onmousemove = function(e){
					var l = e.clientX-oLoad.offsetLeft
					oAudio.currentTime = (l/200)*oAudio.duration
					
				}
				document.onmouseup = function(){
					document.onmousedown = null
					document.onmousemove = null
					console.log("up")
				}
				return false
				
			}
			//播放结束
			oAudio.addEventListener("ended",function(){  //addEventListener() 方法用于向指定元素添加事件句柄。
				num++                              //播放结束自动跳到下一首
            	if(num>arr.length-1){
            		num=0
            	}
            	
				oAudio.src = arr[num]
				oName.innerHTML = arrText[num]
				oAudio.play()
				oPlay.innerHTML = '<i class="iconfontt icon-iconstop"></i>'
			})
			
			//点击播放歌曲
			for (var i = 0 ; i <oLi.length ; i++) {    //注意当前点击下标和数组下标对齐
				oLi[i].index = i
				
				oLi[i].onclick =function(){
					num = this.index
					oAudio.src = arr[this.index]
					oName.innerHTML = arrText[this.index]
					oAudio.play()
					oPlay.innerHTML = '<i class="iconfontt icon-iconstop"></i>'
				}
			}
            //下一首
            oNext.onclick = function(){
            	num++
            	if(num>arr.length-1){
            		num=0
            	}        	
				oAudio.src = arr[num]
				oName.innerHTML = arrText[num]
				oAudio.play()
				oPlay.innerHTML = '<i class="iconfontt icon-iconstop"></i>'
            }
			//上一首
			oPrev.onclick = function(){
				num--
            	if(num<0){
            		num=arr.length-1
            	}        	
				oAudio.src = arr[num]
				oName.innerHTML = arrText[num]
				oAudio.play()
				oPlay.innerHTML = '<i class="iconfontt icon-iconstop"></i>'
			}
			
			//列表
			oBtn.onclick = function(){     //歌曲列表隐藏开关
				if (i) {
					oML.style.display = "block"
					i = false
				}else{
					oML.style.display = "none"
					i = true
				}
			}
			
			//获取分钟的函数
			function getMin(time){       //歌曲时长转换00:00模式
				var m = Math.floor(time/60)
				var s = Math.floor(time%60)
				if(m<=9){
					m="0"+m
				}
				if(s<=9){
					s = "0"+s
				}
				return m+":"+s
			}
		</script>

HTML：

<div class="music">
			<div class="musicL">
				<i class="iconfontt icon-shangyishou"></i>
				<span class="play" id="play">
					<i class="iconfontt icon-bofang"></i>
				</span>
				<i class="iconfontt icon-xiayishou"></i>
			</div>
			
			<div class="progress">
				<span class="start_time" id="start_time">00:00</span>
				<div class="load" id="load">
					<div class="circle" id="circle">
						<div class="round" id="round">
							
						</div>
						
					</div>
				</div>
				<span class="total_time" id="total_time">00:00</span>
			</div>
			<div class="music_name">
				<span id="musicName">My friend</span>
				<i class="iconfont icon-yinleliebiao" id="icon-yinleliebiao"></i>
			</div>
		</div>
		<audio id="audio"></audio>
		
		<div class="music_list" id="music_list">
			<ul>
				<li>My friend</li>
				<li>绝不会忘记</li>
				<li>幼稚完</li>
				<li>明年今日</li>
			</ul>
		</div>

 CSS：

           *{
				margin: 0;
				padding: 0;
			}
			ul li{
				list-style: none;
			}
			.music{
				width: 550px;
				height:48px;
				background: url(img/playbar.png);
				background-position: 0 0;
				margin: 0 auto;
				line-height:52px;
				position: relative;
				
			}
			.musicL{
				float: left;
			}
			.progress{
				float: left;
				font-size: 14px;
				width: 300px;
				height:40px;
				margin-left:10px;
				margin-top: 2px;
			}
			.load{
				display: inline-block;
				width: 200px;
				height: 8px;
				background:#ddd;
				cursor: pointer;
				position: relative;
				top: -2px;
			}
			.circle{
				width:0px;
				height: 8px;
				background: url(img/statbar.png);
				background-position: left -66px; 
				position: relative;
				left: 0;
				top: 0;
			}
			.round{
				position: absolute;
				width: 22px;
				height: 24px;
				border-radius: 50%;
				background: url(img/iconall.png);
				background-position: 0 -280px;
				right: -13px;
				top: -7px;
				margin-left: -10px;
			}
			.music_list{
				width: 200px;
				background: #DDDDDD;
				margin: 0 auto;
				position: absolute;
				right: 685px;
				display: none;
			}
			.music_list li{
				height: 40px;
				border-bottom: 1px solid #ccc;
				line-height: 40px;
				cursor: pointer;
			}
			.iconfontt{
				background: url(img/playbar.png);
				display: block;
			    float: left;
			  
			    margin-right: 8px;
			    text-indent: -9999px;
			}
			.icon-shangyishou{
				background-position: 0 -130px;
				 width: 28px;
			    height: 28px;
			    margin-top: 12px;
			}
			.icon-iconstop{
			    width: 36px;
			    height: 36px;
			    margin-top: 8px;
				background-position: 0 -165px;
			}
			.icon-xiayishou{
				background-position: -80px -130px;
				 width: 28px;
			    height: 28px;
			    margin-top: 12px;
			}
			.icon-bofang{
				background-position: 0 -204px;
				width: 36px;
			    height: 36px;
			    margin-top: 8px;
			}
			.start_time{
				color: #a1a1a1;
				margin-right: 5px;
			}
			.total_time{
				color: #797979;
				margin-left: 7px;
			}
			.music_name{
				color: #e8e8e8;
			}
			.iconfont{
				font-size: 20px;
			}
			.icon-yinleliebiao{
				cursor: pointer;
			}

做得略微简陋，看看就好，解释也很粗糙，相信你们看得懂的