mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-24 10:47:44 +00:00
133 lines
3.6 KiB
Text
133 lines
3.6 KiB
Text
---
|
|
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',
|
|
},
|
|
};
|
|
```
|