diff --git a/src/lib/audio/_private.ts b/src/lib/audio/_private.ts deleted file mode 100644 index efbb9e2..0000000 --- a/src/lib/audio/_private.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { AudioMetadata, AudioPlayerElement } from '$lib/types'; -import { writable } from 'svelte/store'; - -// readonly - stores will update when bindings change -export const _current_time = writable(0); -export const _element = writable(); -export const _duration = writable(0); -export const _ended = writable(false); -export const _loading = writable(false); -export const _paused = writable(true); - -// handlers - when store value changes, the binding will update the audio element -export const _start_at = writable(0); -export const _autoplay = writable(false); -export const _muted = writable(false); -export const _src = writable(''); -export const _metadata = writable(null); diff --git a/src/lib/audio/audio-element.ts b/src/lib/audio/audio-element.ts new file mode 100644 index 0000000..7b3b371 --- /dev/null +++ b/src/lib/audio/audio-element.ts @@ -0,0 +1,25 @@ +import { browser } from '$app/environment'; +import { onMount } from 'svelte'; +import { readable } from 'svelte/store'; + +export const audio_element = readable(null, (set) => { + if (!browser) return; + const ID = 'svelte-podcast-generated-audio-element'; + onMount(() => { + const el = document.createElement('audio'); + el.id = ID; + el.setAttribute('preload', 'metadata'); + el.muted = false; + el.autoplay = true; + el.controls = true; + document.body.appendChild(el); + set(el); + }); + + return () => { + const element = document.getElementById(ID); + element ? element.remove() : null; + }; +}); + +export type AudioElementStore = typeof audio_element; diff --git a/src/lib/audio/audio-loader.svelte b/src/lib/audio/audio-loader.svelte index ba26eb2..94745c3 100644 --- a/src/lib/audio/audio-loader.svelte +++ b/src/lib/audio/audio-loader.svelte @@ -1,76 +1,13 @@ - -