uppy/docs/sources/audio.mdx

---
sidebar_position: 3
slug: /audio
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

import UppyCdnExample from '/src/components/UppyCdnExample';

# 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](/examples) or take it for a spin in
[StackBlitz](https://stackblitz.com/edit/vitejs-vite-zaqyaf?file=main.js).

:::

## When should I use this?

When you want users to record audio on their computer.

## Install

<Tabs>
  <TabItem value="npm" label="NPM" default>

```shell
npm install @uppy/audio
```

  </TabItem>

  <TabItem value="yarn" label="Yarn">

```shell
yarn add @uppy/audio
```

  </TabItem>

  <TabItem value="cdn" label="CDN">
    <UppyCdnExample>
      {`
        import { Uppy, Dashboard, Audio } from "{{UPPY_JS_URL}}"
        const uppy = new Uppy()
        uppy.use(Dashboard, { inline: true, target: 'body' })
        uppy.use(Audio)
      `}
    </UppyCdnExample>
  </TabItem>
</Tabs>

## Use

```js {3,7,11} showLineNumbers
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`](/docs/dashboard)).

#### `showAudioSourceDropdown`

Configures whether to show a dropdown to select audio device (`boolean`,
default: `false`).

#### `locale`

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