How do we change the color of HTML progress bar audio?

Question

I am not actually experiencing a problem although I was wondering how to make the progress element be a certain color.

This is what I have:

and This is what I want:

Im new to coding so please try and be really specific, Also this is the CSS:

    width: 50%;
    height: 5px;
    background: rgba(0,0,0,.3);
    margin-top: 25px;
    float: left;
    margin-left: 10px;
    border-radius: 15px;
    background-color: blue;
}
/*Grabable Playhead*/
#playhead{
    cursor: pointer;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-top: -6px;
    background: black;
}

you can check out [this](https://stackoverflow.com/questions/18368202/how-to-set-color-for-css3-html5-progress-element) question. I think it will help you. — Mohit Chandel, Dec 31 '19 at 04:51
I tried doing everything the link said and nothing worked, any other ideas? — coder123, Dec 31 '19 at 05:04
Can you add a minimal,reproducible example? https://stackoverflow.com/help/minimal-reproducible-example — Rence, Dec 31 '19 at 08:25

N'Bayramberdiyev · Accepted Answer · 2019-12-31T15:17:16.497

You want something like this (assumed you use jQuery):

$(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>

How do we change the color of HTML progress bar audio?

1 Answers1