@daviddarnes/sample-input
v1.0.1
Published
A Web Component to sample audio or video added to an upload input
Downloads
7
Maintainers
Readme
sample-input
A Web Component to sample audio or video added to an upload input
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
orvideo
element so it can be previewed
Installation
You have a few options (choose one of these):
- Install via npm:
npm install @daviddarnes/sample-input
- 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="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