Components / Media

Audio Editor

Component + manager

Manages audio metadata editing, allowing users to seed data, modify tags, and optionally generate new audio from text.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentAudioEditor

Managercreate_audio_editor_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { AudioEditor, create_audio_editor_manager } from "sveltekit-ui"

  // This editor needs your audio backend. POST /api/audio accepts
  // multipart audio/tags/file_name (or text_to_audio_input/voice_id)
  // and returns { id }. GET /api/files/{id} serves the resulting audio.
  // POST /api/audio/read-tags accepts multipart file and returns
  // { raw: { TIT2: "Title", TPE1: "Artist", ... } } when seeding an audio file.
  let saved_name = $state("")

  const manager = create_audio_editor_manager({
    is_popover: false,
    api_prefix: "/api",
    fetch_path_audio_read_tags: "/api/audio/read-tags",
    fetch_path_audio_post: "/api/audio",
    file_prefix: "/api/files/",
    on_finish: (result) => { saved_name = result.file_name },
  })
</script>

<AudioEditor {manager} />
{#if saved_name}<p role="status">Saved {saved_name}</p>{/if}

API reference

Configure the manager, call its methods, and read its reactive state.

11 entries in configuration

Property	Type	Default	Description
`account`	`object`	`null`	an account object used for saving new audio to a specific user or namespace
`storage`	`object`	`null`	storage definition for retrieving/saving audio and images
`locally_uploaded_files`	`any`	`null`	reference to any local file state you want to pass in
`is_disabled`	`boolean`	`false`	disables certain inputs and buttons if true
`api_prefix`	`string`	`/api`	base URL for your app-provided audio and storage endpoints; no backend service is included
`fetch_path_audio_read_tags`	`string`	`/api/tools/audio/read_tags`	POST endpoint accepting multipart file data and returning { raw: ID3 tags }; defaults to api_prefix + /tools/audio/read_tags
`fetch_path_audio_post`	`string`	`/api/tools/audio`	POST endpoint accepting multipart audio and metadata fields, returning { id }; defaults to api_prefix + /tools/audio
`storage_src`	`string`	`/api/storage/{storage_id}`	stored-media URL template for all file pickers; defaults to api_prefix + /storage/{storage_id}
`file_prefix`	`string`	`/api/storage/`	prefix for retrieving generated audio by id; defaults to api_prefix + /storage/
`storage_default_folder_path`	`string`	`null`	if using a storage system, sets the default folder path for picking files
`on_finish`	`function`	`null`	callback triggered upon finishing (e.g., passing the newly generated audio file object)