Skip to main content

Uppy 4.0 is here: TypeScript rewrite, Google Photos, React hooks, and much more.

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.

tip

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 install @uppy/audio

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',
},
};