您的位置：首页 > 移动开发

用H5和js写一个移动端自定义播放器

2015-11-26 16:24 519 查看

前言

由于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="30" height="30" /></div>

</div>
<div style="width: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="width:98%">
<strong id="bar" class="bar" style="width: 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(/\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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航