Feature request: add option to continuously highlight tabs that play sound

[hansdampfinger666]

Description

If I have a large amount of media tabs open (like Youtube) it's really hard to see which one is currently playing something (audio/video), when I'm not on it currently. It'd be really cool to have an option to highlight that audible tab somehow, so I can find it quickly again.

[SunnyZebra]

Haven't seen an option, but custom stylesheets is your friend.

I pulsate border color and audio icon when audio of a tab is playing. You can find inspiration from my code and adjust to your liking and use it in the styles editor.

#root.root{ 
 --long-transition-time: 1.4s;
}

@keyframes borderSoundPlaying {
  0%,
  100% {
    border: 2px green groove;
    background-color: rgba(0, 0, 0, 0.2);
  }

  50% {
    border: 2px blue groove;
    background-color: rgba(0, 0, 0, 1);
  }
}

@keyframes audio-animation {
  0%,
  100% {
    scale: 1;
    fill: white;
  }
  50% {
    scale: 1.4;
    fill: rgba(250, 50, 50, 0.8); 
  }
}

.Tab[data-audible="true"] .body {
  animation: borderSoundPlaying var(--long-transition-time) linear infinite;
}
.Tab[data-audible="true"] .audio > svg {
  border: 0 !important;
  animation: audio-animation var(--long-transition-time) linear infinite;
}

[hansdampfinger666]

I'd prefer a constant outline/highlight, so I just cranked the transition time up to 100 and that works just fine (and I have no clue of web tech/JS etc.). Thanks @SunnyZebra!

[SunnyZebra]

Then you need even less code. Just having a static border around tabs with playing media this part is enough.

.Tab[data-audible="true"] .body {
      border: 2px green groove;
}

[Elaws]

If it helps, there is the very useful "Go to playing tab" extension, where you have a shortcut and/or a button to go to the tab which is playing something (or scroll through them if multiple tabs are playing something).

Can be useful when simply highlighting the tab may not be sufficient because the playing tab is hidden in another panel.

[hansdampfinger666]

@Elaws excellent, grabbed that. Thanks!

[GodKratos]

just fyi, I'm currently using this to create a red pulsing circle on the tab when audio is playing

/* pulse animation for sound playing tabs */
@keyframes pulse
{
  0%
  {
    width: 0px;
    height: 0px;
    opacity: 1;
  }

  100%
  {
    width: 50px;
    height: 50px;
    opacity: 0;
    top: calc(50% - 25px);
    left: calc(30px - 25px);
  }
}

.Tab[data-audible="true"] .body::before
{
  content: '';
  position: absolute;
  top: 50%;
  left: 30px;
  border-radius: 50%;
  background: #b002a8;
  animation: pulse 2s ease-out 0s infinite;
  z-index: -1;
  opacity: 0
}