@daviddarnes/is-playing

is-playing

A Web Component to indicate when an audio, or video, element is playing.

Demo | Futher reading

Examples

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

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

Features

This Web Component allows you to:

• 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

Installation

You have a few options (choose one of these):

• Install via npm: npm install @daviddarnes/is-playing
• Download the source manually from GitHub into your project.
• Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)

Usage

Make sure you include the <script> in your project (choose one of these):

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

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@daviddarnes/is-playing@2.0.0/is-playing.js"
></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://esm.sh/@daviddarnes/is-playing@2.0.0"
></script>

Multiple audio and video elements

is-playing will also reveal which audio element is playing by adding a playing attribute to itself with the value of the playing elements ID. Note that in order for this to happen the playing element must have an id and there needs to be at least 2 audio or video elements:

<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>

Credit

With thanks to the following people:

• Zach Leatherman for inspiring this Web Component repo template