自定义<audio>样式

2019独角兽企业重金招聘Python工程师标准>>>

参考 https://www.jianshu.com/p/653a860b8dcb 参考这篇文章，根据个人项目做了个自定义的音频的demo，其中添加了滑动圆点控制播放进度的功能

html代码

<audio id="article_audio" class='article_audio' controls src='audio.mp3'>
</audio>
<div class="audio_box">
	<a id="play_btn" class="play_btn"></a>
	<div id="pgs" class="pgs">
        <div id="progress" class="pgs-play"></div>
        <div id="circle" class="circle"></div>
    </div>
    <div class="time_p clearfix">
    	<span id="playedTime" class="playedTime">00:00</span>
    	<span id="totalTime" class="totalTime">00:00</span>
    </div>
</div>

JS代码

$(function(){
	var audio = $('#article_audio').get(0);
	var totalWidth = $("#pgs").width();  //进度条长度
	function startAudio(){
		audio.play();
		$("#play_btn").addClass("on");
	}
	
	function endAudio(){
		audio.pause();
	    $("#play_btn").removeClass("on");
	}
	
	/**
	 * 获取音频总时长，并转化为 00:00格式
	 */
	$('#article_audio').on("loadedmetadata",function () {
        $('#totalTime').text(transTime(this.duration));
  	});
  	
  	
  	/**
  	 * 开始/暂停按钮点击事件
  	 */
  	$("#play_btn").click(function(e){
  		if(audio.paused){
  			startAudio();
  		}else{
  			endAudio();
  		}
  	});
  	
  	/**
  	 * 播放进度
  	 */
  	audio.addEventListener('timeupdate',updateProgress,false);
	//更新进度条
	function updateProgress() {
	    var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
	    $('.pgs-play').css('width', value + '%');
	    $("#circle").css({"left":(audio.currentTime/audio.duration)*totalWidth-1+"px"});
	    $("#playedTime").html(transTime(audio.currentTime));
	}
	
	$("#pgs").click(function(e){
		var startX = $(this).offset().left;  //进度条开始的x坐标
		var endX = e.clientX;  //点击事件的x坐标
		rate = (endX - startX) / totalWidth;
		$("#circle").css({"left":(endX-startX-1)+"px"});
		audio.currentTime = rate*audio.duration;
		updateProgress();
	});
	
	/**
	 * 播放结束
	 */
	audio.addEventListener('ended',endAudio,false);
	
	$("#circle").on("touchstart",function(e){
		endAudio();
	});
	$("#circle").on("touchmove",function(e){
		e.preventDefault();
		var startX = $("#pgs").offset().left;  //进度条开始的x坐标
		var endX = e.originalEvent.touches[0].clientX;  //点击事件的x坐标
		if((endX+1) > startX && endX < (startX+totalWidth)){  //触摸范围大于进度条起点，小于进度条终点
			$("#circle").css({"left":(endX-startX-1)+"px"});
			rate = (endX - startX) / totalWidth;
			audio.currentTime = rate*audio.duration;
			updateProgress();
		}
	});
	$("#circle").on("touchstart",function(e){
		startAudio();
	});
	
	
	//转换音频时长显示
	function transTime(time) {
	    var duration = parseInt(time);
	    var minute = parseInt(duration/60);
	    var sec = duration%60+'';
	    var isM0 = ':';
	    if(minute == 0){
	        minute = '00';
	    }else if(minute < 10 ){
	        minute = '0'+minute;
	    }
	    if(sec.length == 1){
	        sec = '0'+sec;
	    }
	    return minute+isM0+sec
	}

});	.

CSS代码

.article_audio {
	display: none;
	width: 100%;
	margin: 2.05rem auto;
}

.audio_box {
	position: relative;
	width: 14.55rem;
	height: 3.05rem;
	margin: 0.5rem auto;
	background-color: rgb(245, 245, 245);
}
.pgs{
	position: relative;
	top: 1.3rem; 
	left: 3.5rem;
	width: 10rem;
	height: 3px;
	/*overflow: hidden;*/ 
 	background-color: #E3E8EE; 
 	text-align: center; 
}
.pgs-play{
	position: absolute;
	top:0; 
	left: 0; 
	width: 0; 
	height: 100%; 
	background-color: rgb(255,133,53); 
	z-index: 1;
}
.circle{
	position: absolute;
	top: -5px;
	left: -1px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background-color: rgb(255,133,53);
}

.play_btn{
	position: absolute;
	top: 0.5rem;
	left: 0.9rem;
	display: inline-block;
	width: 1.9rem;
	height: 1.9rem;
	background: url(img/audio_control_icon.png) no-repeat;
	background-size: 100% 100%;
}
.play_btn.on{
	background: url(img/666.gif) no-repeat;
	background-size: 100% 100%;
}
.time_p{
	position: relative;
	top: 1.8rem; 
	left: 3.5rem;
	width: 10rem;
	font-size: 0.6rem;
	color: rgb(143,143,143);
}
.playedTime{
	float: left;
}
.totalTime{
	float: right;
}

转载于:https://my.oschina.net/daladida/blog/1609472