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

html文件：

<div class="m-box">
	<audio src="img/mo.mp3" id='aud'></audio>


	<div class='m-music'>
		<div class="m-button">
			<a class="m-control"><img src="img/play.png" alt=""><span style='color:white'>hhh</span></a>
		</div>
			<p class="m-nowtime">00:00</p>
		<div class='m-progressBar'>
			<div class='bar'></div>
			<div class='m-left'></div>
			<div class="m-right"></div>
		</div>
		<p class='m-totaltime'>00:00</p>

	</div>
</div>

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;
}