Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add @uppy/audio docs #86

Merged
merged 2 commits into from
Mar 27, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 134 additions & 0 deletions docs/sources/audio.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
---
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
[CodeSandbox](https://codesandbox.io/s/uppy-dashboard-xpxuhd).

:::

## 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, { target: Uppy.Dashboard })
`}
</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, { 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 drag and drop area into
(`string` or `Element`, default: `null`).

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