## Plugins

### Audio Plugin

The Audio plugin lets users upload audio files or embed audio from SoundCloud and Spotify.

#### Editor

```tsx widget
import { pluginAudio, RicosEditor } from '@wix/ricos';
import React from 'react';

export default () => (
  // @essential-start
  <RicosEditor placeholder={'Upload an audio file...'} plugins={[pluginAudio()]} />
  // @essential-end
);
```

##### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">AudioPluginEditorConfig</span>

Configuration for the Audio editor plugin. Pass to `pluginAudio()`.

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> AudioPluginEditorConfig</code>

<dl class="pl-4 border-l-2 border-slate-200">
<dt><code><strong>exposeButtons</strong><span class="text-slate-400">?</span>: <a href="/api-docs/related-types#audiobutton"><span class="font-mono">AudioButton</span></a>[]</code></dt>
<dd><p>Controls which audio source buttons appear in the toolbar insert menu. By default, only the file-upload (`'audio'`) button is shown. Add `'soundCloud'` and `'spotify'` to enable embedding from those services.</p>
<p>Default: <code>`['audio']`</code></p></dd>
<dt><code><strong>disableDownload</strong><span class="text-slate-400">?</span>: boolean</code></dt>
<dd><p>When `true`, disables the download button on newly inserted audio blocks.</p>
<p>Default: <code>true</code></p></dd>
<dt><code><strong>getAudioUrl</strong><span class="text-slate-400">?</span>: (src: {         id: string;     }) =&gt; string</code></dt>
<dd><p>Resolves an audio file ID to a full playback URL. Called when rendering audio nodes that store a relative source (e.g. Wix Media). If not provided, a default Wix Media resolver is used.</p></dd>
</dl>

To expose SoundCloud and Spotify embed buttons alongside the default file-upload button:

```tsx widget
import { pluginAudio, RicosEditor } from '@wix/ricos';
import React from 'react';

export default () => (
  // @essential-start
  <RicosEditor
    placeholder={'Upload audio, or embed from SoundCloud / Spotify...'}
    plugins={[pluginAudio({ exposeButtons: ['audio', 'soundCloud', 'spotify'] })]}
  />
  // @essential-end
);
```

#### Viewer

```tsx widget
// @essential-start
import '@wix/ricos/css/plugin-audio-viewer.global.css';
import '@wix/ricos/css/ricos-viewer.global.css';
import { pluginAudioViewer, type RicosDocument, RicosViewer } from '@wix/ricos';
// @essential-end
import React from 'react';

export default () => {
  // @essential-start
  return <RicosViewer content={content} plugins={[pluginAudioViewer()]} />;
  // @essential-end
};

const content = {
  nodes: [
    {
      type: 'PARAGRAPH',
      id: 'foo',
      nodes: [],
      paragraphData: {
        textStyle: {
          textAlignment: 'AUTO',
        },
        indentation: 0,
      },
    },
    {
      type: 'AUDIO',
      id: '8q61c',
      nodes: [],
      audioData: {
        containerData: {
          alignment: 'CENTER',
          width: {
            size: 'CONTENT',
          },
          textWrap: true,
        },
        audio: {
          src: {
            id: 'mp3/f0f74f_48772df0375c41cd88e8e29370ccf899',
          },
        },
        disableDownload: true,
        coverImage: {
          src: {
            id: 'f0f74f_2973832f552e4002b58ec6abbe7fce71~mv2.png',
          },
          width: 436,
          height: 524,
        },
        name: 'Dear Fear',
        authorName: 'Kota The Friend',
      },
    },
  ],
} as RicosDocument;
```

##### <span style="font-weight: 700;" class="rounded-lg border-[1px] border-blue-300 font-mono border-none bg-blue-100 px-2 py-1 leading-[18px] tracking-[0.0175em] font-bold text-slate-900">AudioPluginViewerConfig</span>

Configuration for the Audio viewer plugin. Pass to `pluginAudioViewer()`.

<code class="font-mono text-sm"><span class="text-blue-700">interface</span> AudioPluginViewerConfig</code>

<dl class="pl-4 border-l-2 border-slate-200">
<dt><code><strong>getAudioUrl</strong><span class="text-slate-400">?</span>: (src: {         id: string;     }) =&gt; string</code></dt>
<dd><p>Resolves an audio file ID to a full playback URL. Called when rendering audio nodes that store a relative source (e.g. Wix Media). If not provided, a default Wix Media resolver is used.</p></dd>
</dl>
