is-playing Web Component

Sharing another Web Component today. This is the one that kinda sparked things off for me to create small, but useful, Web Components that I would benefit from and maybe others too.

`is-playing`

<is-playing> is a Web Component that checks if an audio or video element is playing content and applies a playing attribute to itself and the element that is playing.

Usage

The <is-playing> component can be used with the help of a script tag like so:

<script type="module" src="is-playing.js"></script>

<is-playing>
  <audio controls src="https://darn.es/sounds/daviddarnes.m4a"></audio>
</is-playing>

<style>
  :state(playing) {
    border: 1px solid red;
  }
</style>

is-playing example usage

<script type="module" src="is-playing.js"></script>

<is-playing>
  <audio id="audio-2" controls src="https://darn.es/sounds/daviddarnes2.m4a"></audio>
  <audio id="audio-3" controls src="https://darn.es/sounds/daviddarnes3.m4a"></audio>
</is-playing>

<style>
  [playing="audio-2"] #audio-2 {
    background: orange;
  }
  [playing="audio-3"] #audio-3 {
    background: blue;
  }

  [playing]::before {
    content: attr(playing) " is playing";
    position: absolute;
    top: 100%;
    left: 0;
  }
</style>

is-playing example with multiple elements

See the Pen <is-playing> component by David Darnes (@daviddarnes) on CodePen.

Check out the CodePen demo above or the live full demo here.

Features

Here's the benefits of using is-playing:

Select and style elements depending if an audio or video element is playing, using :state(playing) state selector
Polyfill for the :playing CSS selector
Surface and utilise the ID of the audio or video element playing with a playing attribute value on the is-playing element, when there are multiple elements

is-playing

Usage

Features

Further reading

`is-playing`