Add @uppy/audio docs (#86)

docs/sources/audio.mdx

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