Changing the colour of the Playbar for Audio

Site URL: http://richardmcreynolds.com/listen

Hello, 

I am creating audio players for my website.  They are almost where I want them to be, I was just wondering what is the code to change the colour of the bar that shows how far you are through a track?  

Thanks 

Rich 

Add to Design > custom CSS

.player {
    background: gray;
}

Thanks for the reply. 

Is there a way to keep the background the same colour and to change the colour of either the playhead or progress bar?  

9 hours ago, RMcReynolds said:

Thanks for the reply. 

Is there a way to keep the background the same colour and to change the colour of either the playhead or progress bar?  

You mean this? https://prnt.sc/150eppp

I don't think so.   

I am looking to have the colours the same when you load the site.  It is when you play a track that I want a change.

On the default player(shown in the image) there is a bar that shows you how far you are through a track.  It makes everything left of it slightly grey.  Ideally I would be able to change both the bar and the part left of the bar.  Is this possible?  

Thanks for your help.  Apologies if haven't explained it well.  

Try this code

.sqs-widgets-audio-player.dark .played {
    background-color: green;
}

I think that will work but it doesn't yet.  I accidentally put it in the code for the whole site and it placed in front of the text on the player.  When I put it on the css for just this page it doesn't do anything.  This is the code i am using:

<style>
.sqs-widgets-audio-player {background:White!important} 
  
.sqs-widgets-audio-player .title-wrapper 
.title,.sqs-widgets-audio-player .artistName, .sqs-widgets-audio-player .time{color:grey!important} .sqs-widgets-audio-player .action .play-button {border-left-color:hsla(209, 58%, 55%, 0.61)!important} .sqs-widgets-audio-player .action .pause{border-color:hsla(209, 87%, 43%, 0.61)!important} .sqs-widgets-audio-player .artistName {text-transform:uppercase; letter-spacing: .1rem; font-size: .75rem}
    .sqs-widgets-audio-player.dark .played {
    background-color: lightblue;
}
</style>

Where should i put your code so that it goes behind the text?  Or can I change the transparency of it?  

Add to Design > Custom CSS, not Page Header or Code Injection. To change transparency, use rgba color.

.sqs-widgets-audio-player.dark .played {
    background-color: rgba(0,0,0,0.95);
}

That's working perfectly.  Thank you very much for your patience and time.