v150 · CSS · Media · demo

Buffering States

A real <audio> element is loaded through a throttled stream so Chrome can enter native :buffering, :seeking, and :stalled states. The overlays, pills, and rule highlights below are driven by CSS selectors matching the media element, not by toggled demo classes.

Checking media pseudo-class selector support...
audio:buffering matched Playback is waiting for more streamed bytes.
audio:seeking matched The media engine is resolving a new playback position.
audio:stalled matched The user agent stopped receiving media data.

Active pseudo-classes

:playing
:paused
:buffering
:seeking
:stalled
:muted
.lab:has(audio:buffering) .buffer-overlay
.lab:has(audio:seeking) .seek-overlay
.lab:has(audio:stalled) .stall-overlay

Native media readout

  • readyStateHAVE_NOTHING
  • networkStateNETWORK_EMPTY
  • currentTime0.0s
  • bufferednone
  • matches()not loaded

Media events

Waiting for a stream...

Network profile

  • sourcenot loaded
  • service workerchecking
  • stream modeslow WAV
/* These selectors target the real media element state. */
.media-lab:has(audio:buffering) .buffer-overlay {
  opacity: 1;
}

.media-lab:has(audio:seeking) .seek-overlay {
  opacity: 1;
}

.media-lab:has(audio:stalled) .stall-overlay {
  opacity: 1;
}

.media-lab:has(audio:playing) .waveform span {
  animation: pulse 0.75s ease-in-out infinite alternate;
}

see also

implementation reference

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