Audio
The @uppy/audio plugin lets you record audio using a built-in or external
microphone, or any other audio device, on desktop and mobile. The UI shows real
time sound wavelength when recording.
Try out the live example or take it for a spin in StackBlitz.
When should I use this?
When you want users to record audio on their computer.
Install
- NPM
- Yarn
- CDN
npm install @uppy/audio
yarn add @uppy/audio
The bundle consists of most Uppy plugins, so this method is not recommended for production, as your users will have to download all plugins when you are likely using only a few.
It can be useful to speed up your development environment, so don't hesitate to use it to get you started.
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v4.8.0/uppy.min.css" rel="stylesheet">
<!-- 2. Initialize -->
<div id="uppy"></div>
<script type="module">
import { Uppy, Dashboard, Audio } from "https://releases.transloadit.com/uppy/v4.8.0/uppy.min.mjs"
const uppy = new Uppy()
uppy.use(Dashboard, { inline: true, target: 'body' })
uppy.use(Audio)
</script>
Use
import Uppy from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import Audio from '@uppy/audio';
import '@uppy/core/dist/style.min.css';
import '@uppy/dashboard/dist/style.min.css';
import '@uppy/audio/dist/style.min.css';
new Uppy().use(Dashboard, { inline: true, target: 'body' }).use(Audio);
API
Options
id
A unique identifier for this plugin (string, default: 'audio').
title
Configures the title / name shown in the UI, for instance, on Dashboard tabs
(string, default: 'Audio').
target
DOM element, CSS selector, or plugin to place the drag and drop area into
(string, Element, Function, or UIPlugin, default:
Dashboard).
showAudioSourceDropdown
Configures whether to show a dropdown to select audio device (boolean,
default: false).
locale
export default {
strings: {
pluginNameAudio: 'Audio',
// Used as the label for the button that starts an audio recording.
// This is not visibly rendered but is picked up by screen readers.
startAudioRecording: 'Begin audio recording',
// Used as the label for the button that stops an audio recording.
// This is not visibly rendered but is picked up by screen readers.
stopAudioRecording: 'Stop audio recording',
// Title on the “allow access” screen
allowAudioAccessTitle: 'Please allow access to your microphone',
// Description on the “allow access” screen
allowAudioAccessDescription:
'In order to record audio, please allow microphone access for this site.',
// Title on the “device not available” screen
noAudioTitle: 'Microphone Not Available',
// Description on the “device not available” screen
noAudioDescription:
'In order to record audio, please connect a microphone or another audio input device',
// Message about file size will be shown in an Informer bubble
recordingStoppedMaxSize:
'Recording stopped because the file size is about to exceed the limit',
// Used as the label for the counter that shows recording length (`1:25`).
// This is not visibly rendered but is picked up by screen readers.
recordingLength: 'Recording length %{recording_length}',
// Used as the label for the submit checkmark button.
// This is not visibly rendered but is picked up by screen readers.
submitRecordedFile: 'Submit recorded file',
// Used as the label for the discard cross button.
// This is not visibly rendered but is picked up by screen readers.
discardRecordedFile: 'Discard recorded file',
},
};