通过js获取audio时间 自定义播放样式

<div class="audioJd clearfix">
	<div class="lineBox">
		<div class="line">
			<span class="clearfix" id="progressBar"><i></i></span>
		</div>
		<p><span id="currentTime">00:00</span>/<span id="duration">05:00</span></p>
	</div>

	<div class="icon"></div>
</div>
<audio src="../test.mp4" id="audio" autoplay="autoplay" ontimeupdate="updata()" hidden="hidden" controls="controls"></audio>
								

样式就懒得写进来了，没几行，自己随便写一下。

 

function updata() {
				console.log("播放");
				var audio = document.querySelector("audio");
				audio.duration; //获取总播放时间
				audio.currentTime; //获取播放进度
				var value = audio.currentTime/audio.duration*100
				$('#duration').html(transTime(audio.duration));
				$('#currentTime').html(transTime(audio.currentTime));
				$('#progressBar').css('width', value + '%');
			}
			/**
			 * 音频播放时间换算
			 */
			function transTime(value) {
			    var time = "";
			    var h = parseInt(value / 3600);
			    value %= 3600;
			    var m = parseInt(value / 60);
			    var s = parseInt(value % 60);
			    if (h > 0) {
			        time = formatTime(h + ":" + m + ":" + s);
			    } else {
			        time = formatTime(m + ":" + s);
			    }
			    return time;
			}
			
			/**
			 * 格式化时间显示，补零对齐
			 */
			function formatTime(value) {
			    var time = "";
			    var s = value.split(':');
			    var i = 0;
			    for (; i < s.length - 1; i++) {
			        time += s[i].length == 1 ? ("0" + s[i]) : s[i];
			        time += ":";
			    }
			    time += s[i].length == 1 ? ("0" + s[i]) : s[i];
			
			    return time;
			}