实现音乐播放器（播放/暂停、可拉动进度条）

喜欢ヅ旅行 2021-07-24 16:51 867阅读 0赞

**html文件：**

**js文件：**

//音乐播放器
    //.paused 音频暂停
    //对象.currentTime 音频已播放时间
    //对象.duration 音频总时间
    
    $(function(){ 
    	//保证全局只有一个timer，若在click里创建，将每点一次创建一个timer
    	var timer=null;
    	//获得音频对象
    	var $aud=$('#aud')[0];
    
    	//页面加载时，加载音乐总时长
    	var e_min=Math.floor($aud.duration/60);
    	var e_sec=Math.floor($aud.duration%60);
    	$('.m-totaltime').html(e_min+":"+e_sec);
    
    	$('.m-button').click(function(){ 
    	//转换成js对象，因为要使用其固有属性
    
    		$aud.loop=true;
    
    		if(!$aud.paused)
    		{ 
    			aud.pause();
    			$('.m-button img').attr('src','img/play.png');
    			//暂停清除定时器
    			clearInterval(timer);
    		}else{ 
    		//暂停点击播放
    			aud.play();
    			aud.loop=true;
    
    			var left=document.querySelector(".m-left");
    			var right=document.querySelector(".m-right");
    			var progress=document.querySelector(".m-progressBar");
    			var bar=document.querySelector('.bar');
    
    			//加入定时器动态改变数据
    			timer=setInterval(function(){ 
    
    
    				//时间划分取整操作
    
    				var min=Math.floor($aud.currentTime/60);
    				var sec=Math.floor($aud.currentTime%60);
    			
    
    				if(min<10)
    				{ 
    					min='0'+min;
    				}
    				if(sec<10)
    				{ 
    					sec='0'+sec;
    				}
    
    				$('.m-nowtime').html(min+':'+sec);
    
    				//进度条操作
    
    				bar.style.left=($aud.currentTime/$aud.duration)*100+'%';
    
    				left.style.width=($aud.currentTime/$aud.duration)*100+"%";
    				right.style.width=(1-($aud.currentTime/$aud.duration))*100+'%';
    
    
    
    
    				
    			},1000);
    
    			$('.m-button img').attr('src','img/pause.png')
    
    
    				//拖动进度条
    				var flag;
    				var sx;
    				var tx;
    				var res;
    				var n=0;					
    
    				bar.onmousedown=function(){ 
    
    					flag=true;
    					n=1; //使得鼠标抬起时间只能配合按下使用，否则页面鼠标抬起就会响应改变播放时间操作
    					sx=event.clientX;
    					tx=bar.offsetLeft;
    					
    				}
    
    				document.body.onmousemove=function(event)
    				{ 
    
    					if(flag)
    					{ 	
    						
    						var event=event||window.event;
    						var x=event.clientX;
    						res=tx+x-sx;
    						if(res>progress.offsetWidth-bar.offsetWidth)
    						{ 
    							res=progress.offsetWidth-bar.offsetWidth;
    						}
    						if(res<0)
    						{ 
    							res=0;
    						}
    						bar.style.left=res+'px';
    
    					}
    				}
    
    				document.body.onmouseup=function()
    				{ 
    					flag=false;
    					if(n==1)
    					{ 
    						var final=Math.floor((res/progress.offsetWidth)*$aud.duration);
    						$aud.currentTime=final;
    					}
    					n=0;
    
    					
    				}
    				
    
    		}
    
    		
    
    
    	})
    
    });

**css文件:**

/*播放器*/
    .m-box{ 
    	background-color:rgb(30,30,30);
    	height: 50px;
    
    }
    .m-nowtime,.totaltime{ 
    	color:white;
    	float: left;
    	width:35px;
    }
    .m-nowtime{ 
    	margin-left:25px;
    	height: 50px;
    	line-height: 50px;
    }
    .m-totaltime{ 
    	height: 50px;
    	line-height: 50px;
    	color: white;
    }
    
    .m-button{ 
    	width:45px;
    	height: 45px;
    	float: left;
    	border-radius: 50%;
    	border:solid 1px rgb(16,157,89);
    	margin-top:2.5px;
    	cursor: pointer;
    	text-align: center;
    	font-size: 0px;
    	display: inline-block;
    	line-height: 45px;
    	margin-left: 75px;
    }
    
    .m-control>img{ 
    	height: 19px;
    	width:18px;
    
    }
    .m-progressBar{ 
    	float: left;
    	width: 620px;
    	height: 5px;
    	background-color: rgb(36,41,44);
    	margin:22.5px 15px;
    	position: relative;
    		
    }
    .m-left{ 
    	float: left;
    	background-color: rgb(16,157,89);
    	width: 0px;
    	height: 5px;
    
    
    }
    .m-right{ 
    	float: left;
    	width: 100%;
    	height: 5px;
    	background-color: rgb(36,41,44);
    }
    .bar{ 
    	width: 7px;
    	height: 7px;
    	background-color: rgb(16,157,89);
    	border-radius: 50%;
    	position: absolute;
    	top:50%;
    	left:0px;
    	transform:translate(-50%,-50%);
    
    }
    .bar:hover{ 
    	transform-origin: 100% 100%;
    	transform: scale(1.5);
    	cursor: pointer;
    }