问我们如何改变HTML进度条音频的颜色？

EN

$(function() {
    const audio = $('audio')[0];
    
    $('#player a').click(function(e) {
        e.preventDefault();
        
        $(this).find('i').toggleClass('fa-play-circle fa-pause-circle');
        
        if (audio.paused) {
            audio.play();
        } else {
            audio.pause();
        }
    });
    
    audio.ontimeupdate = () => {
        $('#progress').css('width', audio.currentTime / audio.duration * 100 + '%');
        $('#timer').text(formatTime(audio.currentTime));
    };
    
    audio.onended = () => {
        $(this).find('i').toggleClass('fa-play-circle fa-pause-circle');
    };
    
    $('#progress-bar').click(function(e) {
        e.preventDefault();
        audio.currentTime = e.offsetX / $(this).width() * audio.duration;
    });
    
    function formatTime(seconds) {
        let minutes = Math.floor(seconds / 60);
        seconds = Math.floor(seconds % 60);
        seconds = (seconds >= 10) ? seconds : '0' + seconds;
        return minutes + ':' + seconds;
    }
});

#player {
    display: flex;
    align-items: center;
}

#player > a {
    width: 10%;
    color: #1d2226;
}

#progress-bar {
    width: 80%;
    background-color: #eef1f3;
    height: 5px;
    cursor: pointer;
}

#timer {
    width: 10%;
    text-align: right;
}

#progress-bar > #progress {
    background-color: #1d2226;
    display: block;
    width: 0;
    height: 5px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<audio src="https://www.dropbox.com/s/t32waag3ib20b28/OneDance-Drake.mp3?raw=1" ></audio>

<div id="player">
    <a href="javascript:void(0)">
        <i class="far fa-play-circle fa-3x"></i>
    </a>
    <div id="progress-bar">
        <span id="progress"></span>
    </div>
    <div id="timer">
        
    </div>
</div>