js操作媒体播放带进度条效果如下:完整代码如下：

效果如下:
完整代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条跟随滚动条变化</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            height: 70px;
            width: 800px;
            margin: 200px auto;
            background-color: #ccc;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box {
            width: 600px;
            height: 20px;
            border-radius: 50px;
            background-color: #666;
            overflow: hidden;

        }

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

        .btn {
            width: 60px;
            height: 60px;
            color: #fff;
            line-height: 60px;
            text-align: center;
            cursor: pointer;
            user-select: none;
            background-color: orangered;
            border-radius: 50%;
            box-shadow: 2px 2px 5px #ccc;
        }

        .main #time {
            display: inline-block;
            font-size: 14px;
            margin: 5px 10px;
            padding: 5px 10px;
            border: 1px solid red;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <audio src="./music/demo.mp3" id="player"></audio>
    <div class="main">
        <div class="btn">
            开始
        </div>
        <span id="time"></span>
        <div class="box">
            <div class="progress"></div>
        </div>
    </div>

    <script src="../js/utils.js"></script>
    <script>
        function $(selector) {
            return document.querySelector(selector);
        }

        let btns = $(".btn");
        let kg = true;
        btns.onclick = function () {
            if (kg) {
                player.play();
                btns.innerHTML = "暂停";
            } else {
                player.pause();
                btns.innerHTML = "开始";
            }
            kg = !kg;
        }

        let box = $(".box");
        let progress = $(".progress");
        let timer = setInterval(() => {
            let str = utils.converSec(player.currentTime) + "/" + utils.converSec(player.duration)
            $("#time").innerHTML = str;
            let precent=utils.converSec(player.currentTime)*100 + "/" + utils.converSec(player.duration)
            progress.style.width =  (player.currentTime * 100 / player.duration) + '%';
        }, 500);
    </script>
</body>

</html>