v152 · 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.

Media pseudo-classes enabled. Press play, pause, seek, or mute and watch the card react. Experimental feature disabled. Chrome 152 currently requires a restart with --enable-blink-features=CSSMediaElementPseudos. The audio still works, but the CSS-only glow, labels, and mute styling will not activate without that flag.
🎵

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