音乐播放器及其进度条

JS引用部分：

let _ = {

repairZero(num) {
    num = num.toString()
    return num[1] ? num : ('0' +num)
},
makeStr() {
    let code = Array.prototype.shift.call(arguments)
    return Array.prototype.join.call(arguments, code)
},
convertSec2Str(total) {
    let min = _.repairZero(Math.floor(total / 60))
    let sec = _.repairZero(Math.floor(total % 60))
    return _.makeStr(':', min, sec)
}

}

CSS：

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .container {
        height: 10px;
        width: 400px;
        background: #666;
        margin: 100px;
        overflow: hidden;
        border-radius: 5px;
    }

    .progress {
        background-color: red;
        height: 100%;
        width: 20%;
        border-radius: 5px;
    }
    
    .play_btn {
        width: 100px;
        height: 100px;
        font-size: 14px;
        text-align: center;
        line-height: 100px;
        border-radius: 50%;
        cursor: pointer;
        background-color: steelblue;
        box-shadow: 2px 2px 5px #ccc;
    }
</style>

JS：

<audio id='palyer' src="../6.23/demo.mp3"></audio>
<div class="play_btn">播放</div>
<div class="time"></div>
<div class="container">
    <div class="progress"></div>
</div>
<script src="../6.23/进度条.JS"></script>
<script>
    window.onload = function () {
        let progress = document.querySelector('.progress')
        // let palyer = document.querySelector('#player')
        let player = document.querySelector('audio')
        //oncanplay 在视频加载完毕后开始执行JS
        document.querySelector('.play_btn').onclick = function () {
            if (this.innerHTML === '播放') { //点击时调用 如果文本是播放 执行下列语句
                player.play() //播放器播放
                this.innerHTML = '暂停' //使文本变成暂停
            } else {
                player.pause() //播放器暂停
                this.innerHTML = '播放' //使文本变成播放
            }
        }
        
        let timer = setInterval(() => {
            let str = _.convertSec2Str(player.currentTime) + '/' + _.convertSec2Str(player.duration);//currentTime返回播放器当前时间 秒 然后把秒用方法换算成分钟   _.convertSec2Str(player.duration)总时间
            document.querySelector('.time').innerHTML = str //获取div time的位置 把文本换成时间
            progress.style.width = (player.currentTime * 100 / player.duration) + '%'//当前的时间乘以100 再除以总时间 得到百分比
        }, 500);
           
    }
</script>