<html xmlns:th="http://www.thymeleaf.org">
<head>
<style type="text/css">
.Audio{position: relative; width: 500px; margin: 0 auto;}
.pgs{width: 326px; margin: 0 auto 30px; background-color: #E3E8EE; text-align: center; position: relative; overflow: hidden; height: 50px;}
.pgs-play{position: absolute; top:0; left: 4.65%; width: 0; height: 100%; background-color: #4785f9; z-index: 1;}
.pgs img{width: 100%; position: relative; z-index: 2;}
.audio-name{position: absolute; top: 0; width: 100%; left: 0;text-align: center; color: #666; font-size: 12px;}
.controls{width: 100%; height: 40px; padding: 0; text-align: center;}
.play-pause{border: 0; outline: 0; padding: 0; width: 40px; height: 40px; margin: 0 28px; background: none; display: inline-block; vertical-align: middle;}
.icon-play{width: 40px; height: 40px; background: url(/images/music/play.png) no-repeat; display: block; color: #478f59;}
.icon-pause{width: 40px; height: 40px; background: url(/images/music/pause.png) no-repeat; display: block; color: #478f59;}
.controls span{color: #b3b5b7; font-size: 12px; display: inline-block; width: 34px;}
.audio-time{display: inline-block; vertical-align: middle;}
</style>
</head>
<body>
<div class="Audio">
<audio id="audioTag" src="../story.mp3" autoplay hidden="hidden"></audio>
<div class="pgs">
<div class="pgs-play" id="progress" style="width: 20%;"></div>
<img src="../images/music/progress.png"/>
</div>
<div class="controls">
<span class="played-time">00:00</span>
<button class="play-pause" id="playPause">
<span class="icon-btn icon-play"></span>
</button>
<span class="audio-time" id="audioTime">0</span>
</div>
</div>
</body>
<script type="text/javascript">
$(function () {
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 () {
//alert(audio.duration)
$('#audioTime').text(transTime(this.duration));
});
var pgsWidth = $('.pgs img').width() * 0.907; //0.907是 进度条这个div和整个进度条图片宽度的比例
//点击进度条跳到指定点播放
$('.pgs img').click(function (e) {
var rate = (e.offsetX - ($(this).width() - pgsWidth) / 2) / pgsWidth;
audio.currentTime = audio.duration * rate;
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.getElementsByTagName('audio')[0];
var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0);
$('.pgs-play').css('width', value * 0.907 + '%');
$('.played-time').html(transTime(audio.currentTime));
}
//播放完成
function audioEnded() {
var audio = document.getElementsByTagName('audio')[0];
audio.currentTime = 0;
$('#audioTag')[0].pause();
if ($("#audioTag").attr("src") == "../story.mp3") {
$("#audioTag").attr("src","../烦恼歌.mp3");
} else {
$("#audioTag").attr("src","../story.mp3");
}
$("#audioTag")[0].play();
$('.play-pause>span').removeClass('icon-pause').addClass('icon-play');
}
//换下一首
// alert($("#audioTag").attr("src"));
function x() {
}
</script>
</html>