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