v150 · CSS · demo

Media Mood Board

A music player whose visuals — glow ring, status label, title opacity — all change through :playing, :paused, and :muted without a single JavaScript event listener for the visual layer.

Chrome 150+ — requires media element pseudo-classes. Press play, pause, seek, or mute the audio control below and watch the card react.
🎵

Imaginary Summer

Web Audio API · generated in-page · playable tone

Generating playable audio...
🔊 volume

How it works

<audio controls src="generated-tone.wav"></audio>

/* Web Audio generates the WAV source.
   CSS handles the visual state after playback starts. */

/* No JS needed for these visual changes */

/* Glow when playing */
.card:has(audio:playing) .art-wrap {
  box-shadow: 0 0 0 4px var(--accent-emerald);
}

/* Strike-through when muted */
.card:has(audio:muted) .mute-label {
  text-decoration: line-through;
  color: var(--accent-rose);
}

/* Dim title when paused */
.card:has(audio:paused) .track-title {
  opacity: 0.5;
}

/* Generate label text from state */
.card:has(audio:playing) .status::before {
  content: "● PLAYING";
  color: var(--accent-emerald);
}
.card:has(audio:paused) .status::before {
  content: "❚❚ PAUSED";
  color: var(--text-muted);
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗