sample-input

A Web Component to sample audio or video added to an upload input

Demo | Further reading

Examples

General usage example:

<script type="module" src="sample-input.js"></script>

<sample-input>
  <input aria-controls="preview" type="file">
  <audio id="preview" aria-live="polite" controls></audio>
</sample-input>

Example usage with the capture option to record live audio (not compatible with all hardware) and placeholder audio:

<script type="module" src="sample-input.js"></script>

<sample-input>
  <input aria-controls="preview" type="file" accept="audio/*" capture>
  <audio id="preview" aria-live="polite" controls src="https://darn.es/sounds/daviddarnes.m4a"></audio>
</sample-input>

Features

This Web Component allows you to:

• Add an audio or video file that's been added via an upload input to an audio or video element so it can be previewed

Installation

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

1. Install via npm: npm install @daviddarnes/sample-input
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="sample-input.js"></script>

<!-- 3rd party CDN, not recommended for production use -->
<script type="module" src="https://www.unpkg.com/@daviddarnes/[email protected]/sample-input.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