分享站又有新功能了：将文件站上的语音文件正确播放出来。效果图：
暂停：
播放：
实现的效果：类似于音乐播放器一般，但是较之更简单一些，可以正常播放语音，有拖动、快进后退效果便可。
思路：
首先想到的便是利用H5中的audio标签来实现
<audio> 标签定义声音，比如音乐或其他音频流。
可是最终却发现原始的H5标签播放的音频效果，有点太牵强，其美观程度远远达不到我们预期的，于是只能摒弃这样的想法，另辟蹊径了。最终想到最完美的解决方案依旧是利用H5的audio标签，但是得重新定义它的滚动条以及前进、快退等事件。
参考资料：
HTML <audio>标签 http://www.w3school.com.cn/tags/tag_audio.asp
HTML 5 视频/音频参考手册 http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
拜读：https://segmentfault.com/a/1190000007332028
主要代码：
<div class="container">
<div class="starter-template">
<h1>{{data.title}}</h1>
<div class="vicoebox">
<div class="vicoebox-img">
<a href="javascript:void(0)" onclick="audioplay()" class="btn-play"></a>
<img src="{{imgSiteUrl}}{{img}}" width="190" height="190"/>
</div>
<audio id="audio" preload type="audio/mpeg" src="{{imgSiteUrl}}{{data.content}}"></audio>
<!-- 语音控制模块开始 -->
<div class="g-panel">
<div class="m-progress m-progress-song">
<div id="songprogress" class="progress"></div>
<div id="songbar" class="progressbar"></div>
<ul class="songtime">
<li class="start" id="start">0:00</li>
<li class="end" id="end">0:00</li>
</ul>
</div>
</div>
</div>
<!-- 语音控制模块结束 -->
</div>
</div>
js：
<script type="text/javascript">
jQuery('.btn-play').click(function () {
if (jQuery(this).hasClass("btn-play")) {
audio.play();
jQuery(this).removeClass('btn-play').addClass('btn-pause');
} else {
audio.pause();
jQuery(this).removeClass('btn-pause').addClass('btn-play');
}
}); //---------------------------------工具方法开始
var Util = function () {
// 格式化时间为分：秒的形式
function formatTime(seconds, curS) {
var totalS = parseInt(seconds);
var minute = Math.floor((totalS / 60));
var second = totalS - minute * 60;
second = second < 10 ? ("0" + second) : second;
return minute + ":" + second;
} // 将时间转化为百分比
function timeToPercent(curS, totalS) {
var percent = parseInt((Number(curS) / Number(totalS)) * 100) + "%";
return percent;
} // 更新时间
function updateTime(dom, seconds) {
var result = formatTime(seconds);
dom.html(result);
} // 更新进度条
function updateProgress(dom, percent) {
dom.css("width", percent);
return true;
} // 更新进度滑块
function updateBarPos(dom, percent) {
dom.css("left", percent);
return true;
} return {
formatTime: formatTime,
updateTime: updateTime,
updateProgress: updateProgress,
updateBarPos: updateBarPos,
timeToPercent: timeToPercent,
};
}();
//---------------------------------工具方法结束 //更新结束时间
jQuery("#audio")[0].addEventListener("loadedmetadata", function () {
duration = this.duration;//获取总时长
formatDuration = Util.formatTime(duration);
jQuery('.end').html(formatDuration);
}); function audioplay() {
var audio = jQuery("#audio")[0];
var start = jQuery('.start');//开始时间
var end = jQuery('.end');//结束时间 var sprocontainer = jQuery(".m-progress-song");//歌曲进度条容器
var sProgress = jQuery("#songprogress");
var songbar = jQuery("#songbar");//歌曲进度条滑块 // 监听歌曲播放时间发生变化事件
audio.addEventListener("timeupdate", function () {
var curS = audio.currentTime;
var duration = audio.duration;
var curPercent = Util.timeToPercent(curS, duration); // 更新歌曲时间，进度条
Util.updateTime(start, curS);//更新开始时间
Util.updateProgress(sProgress, curPercent);
Util.updateBarPos(songbar, curPercent);
}); //歌曲进度条滑块滑动事件
songbar.on("touchstart", function (e) {
e.preventDefault();
e.stopPropagation(); jQuery(audio).off("timeupdate");
audio.pause(); var totalW = jQuery(sprocontainer).width(); //播放条容器总长度
var leftDis = jQuery(sProgress).offset().left;
var curS = 0;
var curPercent = 0;
var percent = "";
var touchMove = e.originalEvent.changedTouches[0].clientX;
var dis = e.originalEvent.changedTouches[0].clientX - leftDis;
songbar.on("touchmove", function (e) {//当触点在触控平面上移动时触发touchmove事件
e.preventDefault();
e.stopPropagation();
touchMove = e.originalEvent.targetTouches[0].clientX;
dis = touchMove - leftDis > totalW ? totalW : touchMove - leftDis;
dis = touchMove - leftDis < 0 ? 0 : dis;
percent = Math.floor(dis / totalW * 100) + "%";
Util.updateProgress(sProgress, percent);
Util.updateBarPos(songbar, percent); });
songbar.on("touchend", function (e) {//当手指从屏幕上离开的时候触发
e.preventDefault();
e.stopPropagation();
if (audio.paused) {
audio.play();
jQuery('.btn-play').removeClass('btn-play').addClass('btn-pause');
} percent = Math.floor(dis / totalW * 100) + "%";
Util.updateProgress(sProgress, percent);
Util.updateBarPos(songbar, percent);
duration = audio.duration;
curS = duration * parseInt(percent.replace("%", "")) / 100;
audio.currentTime = curS; audio.ontimeupdate = function () {
var curS = audio.currentTime;
var curPercent = Util.timeToPercent(curS, duration); // 更新歌曲时间，进度条
Util.updateTime(start, curS);
Util.updateProgress(sProgress, curPercent);
Util.updateBarPos(songbar, curPercent);
};
songbar.off("touchmove touchend");
});
}); // 歌曲进度条点击事件
sprocontainer.on("mousedown", function (e) {
var totalW = jQuery(sprocontainer).width();
var leftDis = jQuery(sProgress).offset().left;
var curS = 0;
var curPercent = 0;
var dis = e.pageX - leftDis > totalW ? totalW : e.pageX - leftDis;
percent = Math.floor(dis / totalW * 100) + "%"; sprocontainer.on("mouseup", function (e) {
Util.updateProgress(sProgress, percent);
Util.updateBarPos(songbar, percent);
duration = audio.duration;
curS = duration * parseInt(percent.replace("%", "")) / 100;
audio.currentTime = curS; audio.ontimeupdate = function () {
var curS = audio.currentTime;
var curPercent = Util.timeToPercent(curS, duration); // 更新歌曲时间，进度条
Util.updateTime(start, curS);
Util.updateProgress(sProgress, curPercent);
Util.updateBarPos(songbar, curPercent);
};
sprocontainer.off("mouseup");
}); }); // 歌曲播放完毕事件
audio.onended = function() {
jQuery('.btn-pause').removeClass('btn-pause').addClass('btn-play');
};
}
</script>
遇到的问题：
1.duration 获取歌曲的总时间：H5中有获取duration的方法，基本在音频播放的事件里，此属性起到了至关重要的作用；
2.移动端的触摸事件：touchstart、touchend、touchmove:
touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发； touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动； touchend事件：当手指从屏幕上离开的时候触发。 而每个Touch对象包含的属性如下； clientX：触摸目标在视口中的x坐标； clientY：触摸目标在视口中的y坐标； identifier：标识触摸的唯一ID； pageX：触摸目标在页面中的x坐标； pageY：触摸目标在页面中的y坐标； screenX：触摸目标在屏幕中的x坐标； screenY：触摸目标在屏幕中的y坐标； target：触目的DOM节点目标。
关于这三个事件，其实挺有意思的：虽然自己之前很少接触过移动端的开发，但是总是被身边同事的各种“神技能”震撼到，而当自己真的将别人手中的“神技能”实现时，还是挺有成就感的，总感觉一切就是那样神奇（哈哈……这也是为什么喜欢这份工作的原因，乐在其中。）；
3.鼠标事件中的mousedown、mouseup（这两种事件见得次数多了，也便不赘述了）。
滴答滴答前进中：
乐在其中，还需要永不止步。