音乐播放暂停及播放进度条

css样式

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

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

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

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

js代码

<audio id="player" src="demo.mp3"></audio>
    <div class="play_btn">播放</div>
    <div id="time"></div>
    <div class="container">
        <div class="progress"></div>
    </div>
    <script src="demo.js"></script>
    <script>
        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);
    </script>