前言
由于html5自带的播放器样式不怎么好看，大多数人都是自己写一个来满足业务需求。这一次的需求如下：
1.不要上一曲下一曲
2.有进度条和播放暂停按钮
3.有时间显示
demo实现功能
1.进度条滚动
2.时间显示
3.播放控制
4.多平台播放
关键代码展示
<body>
<div class="top"></div>
<div id="containner">
<div style=" 78px; height: 30px; border-radius: 11px; text-align: center; margin:0px auto; ">
<div><img id="icon" src="played.jpg" onclick="play()" width="30" height="30" /></div>
</div>
<div style="100%; height:22px; padding-right:50px;"><span id="showtime" >00:00</span><span>/</span><span id="currenttime">00:00</span></div>
<div id="barbox" class="graph" style="98%">
<strong id="bar" class="bar" style=" 0%;"></strong>
</div>
<div id="divplayer">
<audio id="player" src="" loop="0" autostart="true" hidden="true"></audio>
</div>
</div>
</body>
</html>
<script language="javascript">
//成员变量
var url = 'mp3/myeye.mp3';//（设定文件路径）
var pausedimg = "paused.png";
var playedimg = "played.jpg";
var div = document.getElementById('divplayer');
var player = document.getElementsByTagName('audio')[0];
player.src = url;
//文件长度(秒)
var fileseconds = 0;
//定时器对象
var progressStateTimer;
//进度条父容器宽度
var barboxwidth = 0;
//进度条当前宽度
var currentbarwidth = 0;
//每秒追加宽度
var appendwidth = 0;
//进度条对象
var bar;
//当前运行秒数
var currentseconds = 0;
function play() {
if (player && player.paused) {
//获取文件时长
fileseconds = parseInt(player.duration);
//显示文件时长
document.getElementById("showtime").innerHTML = (formatTime(fileseconds));
//获取进度条的容器宽度
barboxwidth = document.getElementById("barbox").style.width;
//获取容器变量备用
bar = document.getElementById("bar");
//开始播放
player.play();
//显示暂停按钮
document.getElementById("icon").src = pausedimg;
//执行进度条方法
progressStateTimer = setInterval(prossbar, 1000);
} else if (player && player.played) {
//暂停并停止进度条
player.pause();
//显示播放按钮
document.getElementById("icon").src = playedimg;
//停止进度条
clearInterval(progressStateTimer);
}
else {
//进到此处说明player未实例化 或者状态不是播放和暂停
//dosomething
}
}
var prossbar = function () {
if (fileseconds > 0) {
//重新计算新的宽度
if (currentseconds == 0) {
appendwidth = 0;
} else
{
appendwidth = (currentseconds / fileseconds) * 100;
}
bar.style.width = appendwidth + "%";
//显示当前播放的时间
document.getElementById("currenttime").innerHTML = formatTime(currentseconds);
currentseconds++;
if (currentseconds > fileseconds || currentbarwidth >= barboxwidth) {
//停止播放并清除进度条计时器
player.pause();
clearInterval(progressStateTimer);
}
}
}
function formatTime(second) {
return [parseInt(second / 60 % 60), parseInt(second % 60)].join(":")
.replace(/(d)/g, "0$1");
}
</script>
效果图预览
PC端运行
移动端运行
进度条实现原理
1.利用一个DIV作为容器,一个子DIV作为进度条，初始时设定子DIV宽度为0%
2.获取音频文件总时长（有属性可以直接获取（单位为秒））
3.（核心）利用timer计时器来计算当前播放了多少秒，一秒运行一次（可自由设置）
4.利用播放的秒数/文件总秒数/100 =当前的进度条的百分比
5.直接给进度条设定当前宽度
6.判断播放时长和文件时长一致就停止计时器
进度条的广泛运用
多div组成的进度条之前也曾经用该进度条来实现大文件上传，可以多任务执行
demo下载
如果我的分享能帮到你，麻烦给点个赞吧！如果发现错误，也请及时拍砖！请关注我的个人主页http://www.cnblogs.com/jingch