---
title: Audio
description: The audio plugin adds Notion's audio block, an audio file in the browser's player, linked or uploaded through your upload function.
icon: music
---

`createAudioPlugin()` adds Notion's audio block: an "Embed audio" panel (your `empty` snippet, `createMediaEmptyPlugin({ empty })`) until the block has a source, then the browser's player (`<audio controls>`), with an editable caption. It is not a default plugin: list it.

```svelte title="Editor.svelte" check
<script lang="ts">
	import { Edytor, createAudioPlugin } from 'edytor';
</script>

<Edytor plugins={[createAudioPlugin()]} />
```

A [slash menu](/docs/plugins/slash-menu) then lists "Audio" under `Media`. Without the uploads plugin (`createUploadsPlugin({ upload })`), audio files are linked only.

## Options

`createAudioPlugin()` takes no options. The empty block is drawn by the view's media empty plugin ([Menus and handles](/docs/customization/menus#empty-image-and-media-blocks)). With the uploads plugin listed, the empty block has an Upload (`accept="audio/*"`) and pasted and dropped audio files become audio blocks ([Pasted and dropped files](/docs/editor/clipboard#pasted-and-dropped-files)); the answer is stored only when the block is still there, of its kind and without a source: a source a collaborator set while the upload ran stays.

## The kind

| Kind    | Element  | Data              | Preset                                                     |
| ------- | -------- | ----------------- | ---------------------------------------------------------- |
| `audio` | `figure` | `{ src: string }` | Audio (🎵, group `Media`, keywords `sound`, `music`, `mp3`) |

A source is accepted only when it is an `http:`/`https:` URL with a host or a `blob:` URL of one (`safeMediaSrc`), never `data:` or a script URL; any other stored value shows no player. The player has `controls` and `preload="metadata"`.

The block is void like the [image](/docs/plugins/image), and its only text is the caption. The command id is `block.audio`. Its role is in `defaultSemantics`. In a readonly view the empty block is a passive placeholder.

## Clipboard

- Copying exports `<figure><audio src="…" controls></audio><figcaption>caption</figcaption></figure>`.
- Pasting HTML imports an `audio` with a safe `src`, or a `source` child with one (bare, or in a `figure` whose `figcaption` becomes the caption). Without the plugin, a pasted `audio` is dropped.

## Styling

| Selector                     | Matches                     |
| ---------------------------- | --------------------------- |
| `[data-edytor-type='audio']` | The `figure`                |
| `[data-edytor-audio]`        | The wrapper of the `audio`  |

The empty state uses the shared `media` selectors (see [Embed](/docs/plugins/embed#styling)).