h5语音播放(移动端)

<!--语音导航 start-->
<div style="border:0px solid red;width:100%;height:72px;position:relative;overflow-y: hidden;">
<img src="/static/front/images/voice_play.png" style="width: 72px;float:left;height: 72px;margin-top:10px;" id="play"/>
<!--audio start-->
<audio id="audio" src=${(sightSpotVo.voice)!}></audio>
<!--audio end-->
<div style="border:0px solid red;width:50%;height: 56px;float:left;margin-top: 16px;">
<div style="height:10px;float:right;font-size: 12px;margin-top: 8px;color:#8E8E8E;"><span id="time">00:00</span>/<span id="sumTime">00:00</span></div>
<div style="width:100%;margin-top: 25px;height:6px;background:#B7B6B6;position: relative;" id="progress_bar">
<div style="margin:0;padding:0;background:#3099F3;height:6px;width:0%" id="pastime"></div>
</div>
</div>
<a class="goHere" href="/wap/map.htm?type=${(userParam.type)!}&id=${(userParam.id)!}&singspotId=${(sightSpotVo.id)!}&isIt='flase'">
<b class="routeIco"></b>
<p>去这里</p>
</a>
</div>
<!--语音导航 end-->

//语音播放
var initAudio=function (){
var audio=document.getElementById("audio");
//播放按钮
var play=document.getElementById("play");
audio.load(); //音频加载
audio.addEventListener("canplaythrough", function() {
$("#sumTime").text(format(audio.duration));
});
audio.addEventListener('timeupdate',function(){
if (!isNaN(audio.duration)) {
var pastime = document.getElementById("pastime");
var widthline = Math.round(audio.currentTime)/Math.round(audio.duration) * 100;
pastime.style.width = widthline + "%";
$("#time").text(format(audio.currentTime));
};
},false);
play.onclick=function () {
if(audio.paused){
play.src="/static/front/images/voice_pause.png";
audio.play();
playCount++;//播放次数+1
}else{
play.src="/static/front/images/voice_play.png";
audio.pause();
}
}
//注册触摸滑动事件
$('#progress_bar').get(0).addEventListener('touchstart', touchMoveFunc, false);
$('#progress_bar').get(0).addEventListener('touchmove', touchMoveFunc, false);
$('#progress_bar').get(0).addEventListener('touchend', touchMoveFunc, false);
}
//触摸滑动
var touchMoveFunc=function(ev){
audioPorgress(ev);
}
//时间格式化
function format(value) {
var theTime = parseInt(value);// 秒
var theTime1 = 0;// 分
var theTime2 = 0;// 小时
if(theTime > 60) {
theTime1 = parseInt(theTime/60);
theTime = parseInt(theTime%60);
}
var result =(parseInt(theTime1)<10?"0"+parseInt(theTime1):parseInt(theTime1))+":"+(parseInt(theTime)<10?"0"+parseInt(theTime):parseInt(theTime));
if(theTime1 > 0) {
result =(parseInt(theTime1)<10?"0"+parseInt(theTime1):parseInt(theTime1))+":"+(parseInt(theTime)<10?"0"+parseInt(theTime):parseInt(theTime));
}
return result;
}
//调整播放进度条
function audioPorgress(event){
var dom=$('#progress_bar').get(0);
//var event = window.event || ev;
var touch = event.targetTouches[0];
var progressX = touch.pageX - dom.getBoundingClientRect().left;
audio.currentTime = parseInt(progressX/324*audio.duration);
}