关于网页中音乐播放的进度条的js效果

关于网页中音乐播放的进度条的js效果

音乐的时间读取和读条效果
首先先来简单的写一下进度条的样式

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

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

        .progress {
            border-radius: 5px;
            background: red;
            width: 0%;
            height: 100%;
        }

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

给个基本的盒子和音乐的小样

 <audio id="player" src="../day623/mp3/demo.mp3"></audio>
    <div class="play_btn">播放</div>
    <div id="time"></div>
    <div class="container">
        <div class="progress"></div>
    </div>

点击播放就开始播放并且变成暂停，再次点击就暂停

function $(selector) {
            return document.querySelector(selector)
        }

        let progress = $('.progress')
        let player = $('#player')


        $('.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)
            $('#time').innerHTML = str
            progress.style.width = (player.currentTime * 100 / player.duration) + '%'
        }, 500);

对于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)
    }
}