音乐进度条的加载

一、html样式

<div class="outdiv">
		<audio src="yinpin/youaremylover.mp3" id='audo'></audio>

		<div class="play-control">
			<div class="playbtn"></div>
			<span class='passTime'>00:00</span>
			<div class="progressBar">
				<div class="progressBar-pass"></div>
				<div class="progressBar-shengyu"></div>
			</div>
			<span class='totalTime'>00:00</span>
		</div>
	</div>

二、css样式

<style>
    *{  margin: 0;padding: 0;  }
    .outdiv{  height:80px;background: #eceaeb;overflow: hidden;}
    .play-control{  height:50px; margin-top: 15px;padding-left: 20px;box-sizing:border-box;  }
    .playbtn{  width:30px;height:30px;margin-top: 10px;float: left;margin-right: 10px;background:url('images/anniu/play.png');background-size: 30px 30px;  }
    .progressBar{  width:1100px;height:10px;float: left;margin: 20px 15px 0 15px;  }
    span{  color:#38c380;float: left;margin-top: 15px;  }
    .progressBar-pass{width:0;background: #38c380;height:10px;border-radius: 10px;float: left;}
    .progressBar-shengyu{  width:100%;height:10px;background: white;float: left;  }
</style>

三、js脚本

第一步：实现点击按钮的切换（用于理解）

<script>
	var flag = false; //默认为暂停状态，按钮为播放按钮(因为等待播放)
	$('.playbtn').click(function (){
		//如果当前为暂停状态(点击按钮之后会切换成播放状态)
		if(!flag){
			//将自定义的变量flag变为true
			flag=true;
			//点击按钮改为暂停按钮
			$('.playbtn').css({
				'background':"url('images/anniu/pause.png')",
	            'background-size':'30px 30px'
			})
		//如果当前为播放状态(点击按钮之后会切换成暂停状态)	
		}else{
			//将自定义的变量flag变为false
			flag=false;
			//点击按钮改为播放按钮
			$('.playbtn').css({
				'background':"url('images/anniu/play.png')",
	            'background-size':'30px 30px'
			})
		}
	})
</script>

第二步：利用audio标签的属性代替flag变量 实现音频的播放暂停

<script>
    var aud = $('#audo')[0];
    //audio标签需要用到的属性
    //audio.paused 本属性是音频标签的固有属性，表示当前状态是播放还是暂停
                   // 可选值为布尔值 true表示当前为暂停状态 false反之
                   // 本属性不能赋值，只能读取
                   // 状态的变更由play()方法和pause()方法来实现
	$('.playbtn').click(function (){
		//如果当前为暂停状态(点击按钮之后会切换成播放状态)
		if(aud.paused){
			aud.play();
			//点击按钮改为暂停按钮
			$('.playbtn').css({
				'background':"url('images/anniu/pause.png')",
	            'background-size':'30px 30px'
			})
		//如果当前为播放状态(点击按钮之后会切换成暂停状态)	
		}else{
			aud.pause();
			//点击按钮改为播放按钮
			$('.playbtn').css({
				'background':"url('images/anniu/play.png')",
	            'background-size':'30px 30px'
			})
		}
	})
</script>

三、实现时间的改变，进度条的改变（完善）

<script>
    var aud = $('#audo')[0];
    //audio标签需要用到的属性
              //aud.currentTime   当前播放了多长时间
              //aud.duration    总共多长时间
    var timer = null;
	$('.playbtn').click(function (){
		//如果当前为暂停状态(点击按钮之后会切换成播放状态)
		if(aud.paused){
			aud.play();
			//点击按钮改为暂停按钮
			$('.playbtn').css({
				'background':"url('images/anniu/pause.png')",
	            'background-size':'30px 30px'
			})
			timer = setInterval(function(){
				//用时间除以60秒得到一共多少分 对60取余得到剩余多少秒
			    var passtime_m = Math.floor(aud.currentTime/60);
			    var passtime_s = Math.floor(aud.currentTime%60);
			    var duration_m = Math.floor(aud.duration/60);
			    var duration_s = Math.floor(aud.duration%60);
			    //处理时间 当小于10时拼接一个0在前面
                function checkTime(min,sec){
                	if(min<10){
                		min = '0'+min;
                	}else{
                		min += '';
                	}
                	if(sec<10){
                		sec = '0'+sec;
                	}else{
                		sec += '';
                	}
                	return min +':'+ sec;
                }
                //实现时间的改变
                $('.passTime').html(checkTime(passtime_m,passtime_s));
                $('.totalTime').html(checkTime(duration_m,duration_s));
                //实现进度条的改变
                var passpercentage = aud.currentTime/aud.duration;
                var shengyupercentage = (aud.duration-aud.currentTime)/aud.duration;
                //如果还没有播放完 就继续改变他的宽度
                if((aud.duration-aud.currentTime)>0){
                	$('.progressBar-pass').width(passpercentage*100+'%');
                    $('.progressBar-shengyu').width(shengyupercentage*100+'%');
                //如果播放完了 就还原    
                }else{
                	$('.progressBar-pass').width('0%');
                    $('.progressBar-shengyu').width('100%');
                }
			},1000)
		//如果当前为播放状态(点击按钮之后会切换成暂停状态)	
		}else{
			aud.pause();
			//点击按钮改为播放按钮
			$('.playbtn').css({
				'background':"url('images/anniu/play.png')",
	            'background-size':'30px 30px'
			})
			clearInterval(timer);
		}
	})
</script>