A Web Component to indicate when an audio, or video, element is playing
MIT License
is-playing
A Web Component to indicate when an audio, or video, element is playing.
<script type="module" src="is-playing.js"></script>
<is-playing>
<audio controls src="https://darn.es/sounds/daviddarnes.m4a"></audio>
</is-playing>
This Web Component allows you to:
audio
or video
element is playing, using :state(playing)
state selector:playing
CSS selector
audio
or video
element playing with a playing
attribute value on the is-playing
elementYou have a few options (choose one of these):
npm install @daviddarnes/is-playing
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/[email protected]/is-playing.js"
></script>
<!-- 3rd party CDN, not recommended for production use -->
<script
type="module"
src="https://esm.sh/@daviddarnes/[email protected]"
></script>
audio
and video
elementsis-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>
With thanks to the following people: