Skip to main content

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 CodeSandbox.

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, { target: Dashboard });

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 audio into (string or Element, default: null).

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