前言
由於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