daviddarnes / random-source

A Web Component to randomly change audio or video sources

random-source

A Web Component to randomly change audio or video sources.

Demo | Further reading

Examples

<script type="module" src="random-source.js"></script>

<random-source>
  <audio controls>
    <source src="https://darn.es/sounds/daviddarnes.m4a" />
    <source src="https://darn.es/sounds/daviddarnes2.m4a" />
  </audio>
</random-source>

Features

This Web Component allows you to:

• Randomly change the source of an audio or video element once the source has ended
• Trust that the first source element will always be used on load, to match default behaviour

Installation

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

1. Install via npm: npm install @daviddarnes/random-source
2. Download the source manually from GitHub into your project.
3. 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="random-source.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script
  type="module"
  src="https://www.unpkg.com/@daviddarnes/[email protected]/random-source.js"
></script>

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

Credit

With thanks to the following people:

• Zach Leatherman for inspiring this Web Component repo template