<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio实例</title>
<script src="./js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="btn-audio"><audio id="mp3Btn"><source src="./music1.mp3" type="audio/mpeg" /></audio></div>
<div class="progress">
<!--进度条-->
<div class="loader-container"></div>
<div class="controls">
<span class="played-time">00:00</span>
<span class="audio-time" id="audioTime">0</span>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function(){
//播放完毕
$('#mp3Btn').on('ended', function() {
console.log("音频已播放完成");
$('.loader-container').css('width','100%');
$('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
})
//播放器控制
var audio = document.getElementById('mp3Btn');
audio.volume = .100;
$('.btn-audio').click(function() {
event.stopPropagation();//防止冒泡:阻止目标元素的事件冒泡到父级元素
if(audio.paused){ //如果当前是暂停状态
$('.btn-audio').css({'background':'url(images/voice_play.png) no-repeat center bottom','background-size':'cover'});
audio.play(); //播放
return;
}else{//当前是播放状态
$('.btn-audio').css({'background':'url(images/voice_stop.png) no-repeat center bottom','background-size':'cover'});
audio.pause(); //暂停
}
});
//获取时长
//loadedmetadata事件为音频/视频文件加载完数据后触发
// duration 获取音频的时长,单位为s
// transTime为封装好的一个函数,目的是将秒转换为几分几秒的格式
$('#mp3Btn').on("loadedmetadata",function () {
// alert(audio.duration)
$('#audioTime').text(transTime(this.duration));
});
//监听音频播放时间并更新进度条
audio.addEventListener('timeupdate',updateProgress,false);
})
//转换音频时长分/秒显示
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
}
//更新进度条
function updateProgress() {
var audio =document.getElementsByTagName('audio')[0]; //js获取的方式
var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100);//当前时间/总长 再乘以一个100变成百分数
$('.loader-container').css('width', value * 0.907 + '%');//0.907 :进度条div的宽度除以背景img的宽度,如果他们俩的长度一样,就直接value就可以。
$('.played-time').html(transTime(audio.currentTime));
}
</script>
<style type="text/css">
html,body{
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
background:#2b2938;
}
.btn-audio{
margin: 90px auto;
width: 186px;
height: 186px;
background:url(images/voice_stop.png) no-repeat center bottom;
background-size:cover;
}
.loader-container {
height: 100%;
/*进度条长度*/
width: 0;
background: -webkit-linear-gradient(left,#f8dc4b,#d95a3d);
background: -moz-linear-gradient(left,#f8dc4b,#d95a3d);
background: -o-linear-gradient(left,#f8dc4b,#d95a3d);
background: -ms-linear-gradient(left,#f8dc4b,#d95a3d);
background: linear-gradient(left,#f8dc4b,#d95a3d);
border-radius:7px;
box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
animation: loader 1s linear;
}
.progress{
width: 70%;
height: 7px;
border-radius:7px;
margin-left: 15%;
margin-top: 30%;
background: -webkit-linear-gradient(left,#e4e3e4,#e4e5e4);
background: -moz-linear-gradient(left,#e4e3e4,#e4e5e4);
background: -o-linear-gradient(left,#e4e3e4,#e4e5e4);
background: -ms-linear-gradient(left,#e4e3e4,#e4e5e4);
background: linear-gradient(left,#e4e3e4,#e4e5e4);
}
.controls span{color: #b3b5b7; font-size: 12px; display: inline-block; width: 34px;}
</style>
audio自定义样式,控制操作面板的暂停,播放,获取音频的时长,以及根据时长进行进度条展示
最新推荐文章于 2024-03-09 16:06:57 发布