It's great that can upload audio and video files with the input element, but browsers don't make it very easy for the user to preview that file. The sample-input component allows you to use audio and video elements to preview an audio or video file that's been uploaded to an input.
sample-input
The <sample-input> component will listen for changes to the input element and apply the file path that's been set to an audio or video element, the user can then use that element to preview the file they're about to upload via the form.
The reason I created this Web Component was so that I could let people preview audio recordings they were submitting via their mobile device. Interacting with a file input element with the capture attribute applied on an iOS device causes the phone to go into recording mode. This is great for submitting "in the moment" audio or video content, however once finished there wasn't a way to play back what had been recorded (at the time of testing). This seemed like the simplest solution.
Usage
The <sample-input> component can be used with the help of a script tag and placing an input and audio elements in like so:
<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>sample-input example usage
Note that some additional aria attributes have been applied here to further improve the accessibility of the elements and how they interact.
The component also works with more elaborate attribute usage. In the following example an accept has been applied to limit the file uploads to audio only, a capture attribute to trigger the recording UI (on supported devices) and a src attribute on the audio element itself to provide an example recording for the user to listen to:
<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>More complex example of sample-input
Further reading
You can check out the source code, documentation and working demo over on GitHub:
daviddarnes