Components / Media

Audio

Component + manager

Manages playback of audio, including metadata, playback rate, volume, and skip time.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

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

ComponentAudio

Managercreate_audio_manager

svelte

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

  const manager = create_audio_manager({
    src: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
    title: "T. rex roar",
    type: "audio/mpeg",
    ui_type: "standard",
  })
</script>

<Audio {manager} />

API reference

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

17 entries in configuration

Property	Type	Default	Description
`storage_path`	`string`	`null`	template path for retrieving audio or image sources by id
`src`	`string`	`null`	direct audio source url, or retrieved via storage_id if null
`storage_id`	`string`	`null`	id used with storage_path if src is null
`type`	`string`	`audio/mpeg`	mime type for the audio source
`title`	`string`	`null`	title metadata for the audio
`artist`	`string`	`null`	artist metadata for the audio
`album`	`string`	`null`	album metadata for the audio
`image_src`	`string`	`null`	direct url for the audio artwork image
`image_storage_id`	`string`	`null`	id used with storage_path if image_src is null
`image_type`	`string`	`null`	mime type for the artwork image
`default_skip_time`	`number`	`null`	seconds to skip for nav_seek_backward / nav_seek_forward
`ui_type`	`string`	`standard`	layout style for the audio player (standard, short, or square)
`ml`	`number`	`0`	margin-left in rem units
`mr`	`number`	`0`	margin-right in rem units
`mt`	`number`	`0`	margin-top in rem units
`mb`	`number`	`0`	margin-bottom in rem units
`is_hide_image`	`boolean`	`false`	whether the audio image is hidden