效果展示
上代码
html:
<div class="audio-box">
<audio id="audioTag" src="music/tonghuazhen.mp3"></audio>
<div class="a-progress">
<span class="played-time" id="playedTime">00:00</span>
<div class="pgs-total">
<div class="pgs-play" id="progress" style="width: 1%;"></div>
</div>
<span class="audio-time" id="audioTime">0</span>
</div>
<div class="a-controls">
<button class="play-pause" id="playPause">
<span class="icon-btn icon-play"></span>
</button>
<div id="skipForward" class="skip-ward s-right"></div>
<div id="skipBackward" class="skip-ward s-left"></div>
<div id="turnNext" class="turn-ward t-right"></div>
<div id="turnPrev" class="turn-ward t-left"></div>
</div>
</div>
css:
// 自定义语音样式
.audio-box {
margin: 0 auto;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: #ffffff;
border-top: 1px solid #dddddd;
}
.a-progress {
width: 100%;
margin: 20px auto;
position: relative;
padding: 0 65px;
color: #3fcccc;
}
.a-progress > span {
width: 50px;
position: absolute;
top: -1px;
}
.a-progress .played-time {
left: 15px;
text-align: left;
}
.a-progress .audio-time {
right: 15px;
text-align: right;
}
.a-progress .pgs-total {
width: 100%;
height: 16px;
background-color: transparent;
border-radius: 10px;
position: relative;
}
.a-progress .pgs-total:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 7px;
bottom: 7px;
background-color: #bbbbbb;
border-radius: 10px;
z-index: -1;
}
.a-progress .pgs-total .pgs-play {
height: 100%;
position: relative;
border-radius: 10px;
}
.a-progress .pgs-total .pgs-play:before {
content: '';
position: absolute;
top: 7px;
bottom: 7px;
left: 0;
right: 0;
background-color: #3fcccc;
border-radius: 10px;
z-index: 1;
}
.a-progress .pgs-total .pgs-play:after {
content: '';
position: absolute;
right: -8px;
width: 16px;
height: 16px;
top: 50%;
margin-top: -8px;
background-color: #3fcccc;
border-radius: 50%;
z-index: 1;
}
.a-controls {
width: 100%;
padding: 0;
position: relative;
text-align: center;
margin-bottom: 28px;
}
.a-controls .play-pause {
border: 0;
outline: 0;
padding: 0;
width: 65px;
height: 65px;
margin: 0 28px;
}
.a-controls .play-pause .icon-btn {
display: inline-block;
width: 100%;
height: 100%;
}
.a-controls .play-pause .icon-play {
background: url("../images/record-play.png");
background-size: 100% 100%;
}
.a-controls .play-pause .icon-pause {
background: url("../images/record-stop.png");
background-size: 100% 100%;
}
.a-controls .skip-ward {
width: 30px;
height: 30px;
position: absolute;
top: 50%;
margin-top: -15px;
}
.a-controls .s-left {
left: 15px;
background: url("../images/s-left.png");
background-size: 100% 100%;
}
.a-controls .s-right {
right: 15px;
background: url("../images/s-right.png");
background-size: 100% 100%;
}
.a-controls .turn-ward {
width: 40px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
}
.a-controls .t-left {
left: 25%;
margin-left: -20px;
background: url("../images/t-left.png");
background-size: 100% 100%;
}
.a-controls .t-right {
right: 25%;
margin-right: -20px;
background: url("../images/t-right.png");
background-size: 100% 100%;
}
获取音频对象
var audio = $('#audioTag').get(0);
播放暂停控制
$('#playPause').click(function () {
audio.addEventListener('timeupdate', updateProgress, false); // 监听音频播放时间并更新进度条
audio.addEventListener('ended', audioEnded, false); // 监听播放完成事件
// 改变暂停/播放icon
if (audio.paused) {
audio.play();
$('.icon-btn').removeClass('icon-play').addClass('icon-pause');
} else {
audio.pause();
$('.icon-btn').removeClass('icon-pause').addClass('icon-play');
}
})
添加进度调节控制事件
拖动进度条播放
// 读取视频长度,设置页面时长显示-loadedmetadata:指定视频/音频(audio/video)的元数据加载后触发
// audio.duration 获取音频的时长,单位为秒
$('#audioTag').on("loadedmetadata", function () {
$('#audioTime').text(transTime(this.duration));
$(document).on('touchend', '.pgs-total', function (e) {
var x = e.originalEvent.changedTouches[0].clientX - this.offsetLeft;
var X = x < 0 ? 0 : x;
var W = $(this).width();
var place = X > W ? W : X;
audio.currentTime = (place / W) * audio.duration;
$(this).children().css({width: (place / W) * 100 + "%"});
updateProgress();
});
});
快进15秒
$('#skipForward').on('click', function (e) {
skipWard(15);
updateProgress();
});
后退15秒
$('#skipBackward').on('click', function (e) {
skipWard(-15);
updateProgress();
});
四、调用公用事件
// 转换音频时长显示
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.getElementById('audioTag');
var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
$('#progress').css('width', value * 1 + '%');
$('#playedTime').html(transTime(audio.currentTime));
}
// 播放完成
function audioEnded() {
var audio = document.getElementById('audioTag');
audio.currentTime = 0;
audio.pause();
$('#playPause>span').removeClass('icon-pause').addClass('icon-play');
}
// 快进快退
function skipWard(value) {
var audio = document.getElementById('audioTag');
console.log(audio.currentTime, audio.duration)
if (audio.currentTime + value >= audio.duration) {
audio.currentTime = audio.duration;
} else if (audio.currentTime + value <= 0) {
audio.currentTime = 0;
} else {
audio.currentTime += value;
}
}
五、注意:
手机端和PC端存在不同,手机端刚加载页面的时候不会自动加载音频资源,所以获取不到音频的时长信息。
要想一加载页面就获取时长,可以通过启动播放再暂停的方式。
var audio = $('#audioTag').get(0);
audio.play(); // 移动端不自动加载音频,需要启动播放再暂停
audio.pause();
PC端不存在此问题。