Sveltekit-UI

Audio Showcase

Component Name

Audio

Builder Function Name

create_audio_manager

Description

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

Use like example

Config

Property	Type	Default	Description
storage_path	string		template path for retrieving audio or image sources by id
src	string		direct audio source url, or retrieved via storage_id if null
storage_id	string		id used with storage_path if src is null
type	string	audio/mpeg	mime type for the audio source
title	string		title metadata for the audio
artist	string		artist metadata for the audio
album	string		album metadata for the audio
image_src	string		direct url for the audio artwork image
image_storage_id	string		id used with storage_path if image_src is null
image_type	string		mime type for the artwork image
default_skip_time	number		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

Methods

Method	Description	Parameters	Returns
handle_mount	executes on svelte onmount, checks audio readiness	No Params	void
handle_loaded_metadata	sets the time slider max after metadata loads	No Params	void
handle_progress	updates the buffered time for partial loading	No Params	void
handle_time_update	syncs the current audio time with the slider manager	No Params	void
handle_rate_change	updates the audio's playback rate	rate: number	void
handle_seeking	indicates the audio is seeking; sets is_loading to true	No Params	void
handle_can_play	indicates the audio can play; sets is_loading to false	No Params	void
seek_to_audio	seeks the audio to a specified time	time: number	void
resize_image	downscales an image to 128x128 if it exceeds that size	src: string callback: function	void
setup_media_session	configures media session metadata (title, album, artwork, etc.)	No Params	void
update_position_state	updates position state within the media session	No Params	void
nav_seek_backward	skips backward by a set or default number of seconds	details: object	void
nav_seek_forward	skips forward by a set or default number of seconds	details: object	void
toggle_play_pause	toggles audio state between play and pause	No Params	void
play_audio	plays the audio if it is paused	No Params	void
pause_audio	pauses the audio if it is playing	No Params	void
set_is_loading	manually sets the is_loading state	input: boolean	void

Returned Properties

Property	Type	Description
id	string	unique id generated for the audio element
src	string	active audio source
type	string	mime type for the audio source
title	string	title metadata for the audio
artist	string	artist metadata for the audio
album	string	album metadata for the audio
image_src	string	direct url for the audio artwork image
image_type	string	mime type of the audio artwork image
default_skip_time	number	default skip time in seconds for navigation
ui_type	string	current layout style (standard, short, or square)
ml	number	margin-left in rem units
mr	number	margin-right in rem units
mt	number	margin-top in rem units
mb	number	margin-bottom in rem units
is_hide_image	boolean	true if the audio image is hidden
play_pause_button_manager	object	button manager for the play/pause control
time_slider_manager	object	slider manager for the current time
settings_popover_manager	object	popover manager for audio settings
settings_button_manager	object	button manager for opening the settings popover
volume_slider_manager	object	slider manager for volume adjustment
rate_slider_manager	object	slider manager for playback rate adjustment
has_setup_media_session	boolean	indicates whether media session metadata is set
formatted_duration	string	formatted total duration of the audio
formatted_current_time	string	formatted current time in playback
is_loading	boolean	indicates if the audio is loading