用H5和js寫一個移動端自定義播放器

時間 2019-11-17

標籤 h5 一個移動自定義播放欄目 JavaScript 简体版

原文原文鏈接

前言

因爲html5自帶的播放器樣式不怎麼好看，大多數人都是本身寫一個來知足業務需求。這一次的需求以下：javascript

1.不要上一曲下一曲html

2.有進度條和播放暫停按鈕html5

3.有時間顯示java

demo實現功能

1.進度條滾動app

2.時間顯示oop

3.播放控制url

4.多平臺播放spa

關鍵代碼展現

<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>