Skip to content
Edytor
Esc
↑↓navigate↵open⌘Jpreview
On this page

Audio

The audio plugin adds Notion's audio block, an audio file in the browser's player, linked or uploaded through your upload function.

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.

<script lang="ts">
	import { Edytor, createAudioPlugin } from 'edytor';
</script>

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

A 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). 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); 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, 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).

Was this page helpful?