Audio extension

This extension adds support for native <audio> elements in the editor, allowing you to embed audio files directly into your documents.

Install

npm install @tiptap/extension-audio

Settings

addPasteHandler

Controls if the paste handler for audio sources should be added.

Default: true

Audio.configure({
  addPasteHandler: false,
})

autoplay

Controls if the audio should autoplay.

Default: false

Audio.configure({
  autoplay: true,
})

controls

Controls if the audio element should render the native controls.

Default: true

Audio.configure({
  controls: false,
})

loop

Controls if the audio should loop.

Default: false

Audio.configure({
  loop: true,
})

muted

Controls if the audio should be muted.

Default: false

Audio.configure({
  muted: true,
})

preload

The preload behavior for the audio element.

Default: 'metadata'

Audio.configure({
  preload: 'none',
})

controlslist

Provides the controlslist attribute for the audio element.

Default: undefined

Audio.configure({
  controlslist: 'nodownload',
})

crossorigin

Sets the crossorigin attribute for the audio element.

Default: undefined

Audio.configure({
  crossorigin: 'anonymous',
})

disableRemotePlayback

Controls if remote playback should be disabled on the audio element.

Default: false

Audio.configure({
  disableRemotePlayback: true,
})

allowBase64

Allows data: URLs for audio sources.

Default: false

Audio.configure({
  allowBase64: true,
})

HTMLAttributes

Custom HTML attributes that should be added to the rendered HTML tag.

Audio.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})

inline

Controls if the audio node should be inline or not.

Default: false

Audio.configure({
  inline: true,
})

Commands

setAudio(options)

Inserts an audio element at the current position with the specified options. The audio element will be embedded as a block-level node by default, but can be configured to be inline.

editor.commands.setAudio({
  src: 'https://example.com/audio.mp3',
  controls: true,
  autoplay: false,
})

Options

Source code

packages/extension-audio/