Jump to content

CSS timecode visibility in Audio Blocks

Recommended Posts

Site URL: http://freshsalt.org

Hello, I'm trying to customise the audio player's conditional display of the duration of the clip (progress / time), so that the timecode is immediately & always visible.  The default code, currently, reveals the duration only when playing begins. So there's that (first issue), and also wondering about player width cutting off the timecode (second issue). Screen captures from my site, which is still quite rough! www.freshsalt.org

First issue: two examples below, left is timecode visible when playing, right is timecode hidden. 

81849607_Screenshot2022-04-26at19_27_39.thumb.png.496dd82dcf63a97af866c65564a165a8.png

 

Second issue: here's a row of narrower blocks & the timecode isn't revealed at all, even when playing (second from left). And would fit in all except for longer title in far right. So how to reduce minimum width of player, or left margin of timecode, or similar?

67695884_Screenshot2022-04-26at19_27_55.thumb.png.0c706a99afd4839ca5e34975c70fbf2a.png

 

Would really love anyone's help. I've spent hours muddling through Chrome's Developer Tools & various coding basics videos, trying to work it out, no idea. Was hopeful tinkering in realm of .sqs-audio-player.play-state-stopped .duration,.sqs-audio-player.play-state-stopped .progress — but nope. 

Very grateful! 

 

 

Link to comment
  • Replies 1
  • Views 258
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.