saving progress before I try stupid stuff
This commit is contained in:
Ollie Taylor
@@ -1,68 +0,0 @@
|
||||
<script lang="ts">
|
||||
import AudioA11yProgress from '$lib/components/audio-a11y-progress.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { usePlayer, type PlayerElement } from './audio';
|
||||
|
||||
// TODO: Abstract to a store so we can add actions like reqind 20s
|
||||
|
||||
export let src: string;
|
||||
export let autoplay: boolean;
|
||||
|
||||
export let currentTime = 0;
|
||||
export let muted = false;
|
||||
export let paused = true;
|
||||
export let playbackRate = 1;
|
||||
export let volume = 0;
|
||||
|
||||
let audioElement: PlayerElement;
|
||||
|
||||
$: usePlayer(audioElement, 'playbackRate', playbackRate);
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
playing: void;
|
||||
finished: void;
|
||||
paused: { currentTime: number };
|
||||
progress: { currentTime: number };
|
||||
seek: { currentTime: number };
|
||||
rateChange: { playbackRate: number };
|
||||
}>();
|
||||
|
||||
let duration = 0;
|
||||
</script>
|
||||
|
||||
{#key src}
|
||||
<audio
|
||||
bind:this={audioElement}
|
||||
{src}
|
||||
{autoplay}
|
||||
bind:currentTime
|
||||
bind:duration
|
||||
bind:paused
|
||||
bind:muted
|
||||
bind:volume
|
||||
preload="metadata"
|
||||
controls={false}
|
||||
on:timeupdate={() => dispatch('progress', { currentTime })}
|
||||
on:playing={() => dispatch('playing')}
|
||||
on:pause={() => dispatch('paused', { currentTime })}
|
||||
on:ratechange={() => dispatch('rateChange', { playbackRate })}
|
||||
on:ended={() => dispatch('finished')}
|
||||
on:seeked={() => dispatch('seek', { currentTime })}
|
||||
on:durationchange={() => console.log('durationchange')}
|
||||
on:loadeddata={() => console.log('loaded data')}
|
||||
on:loadedmetadata={() => console.log('loadedmetadata')}
|
||||
on:loadstart={() => console.log('load start')}
|
||||
on:seeking={() => console.log('seeking')}
|
||||
on:suspend={() => console.log('suspend')}
|
||||
on:volumechange={() => console.log('volumechange')}
|
||||
on:play={() => console.log('play')}
|
||||
on:canplay={() => console.log('canplay')}
|
||||
on:canplaythrough={() => console.log('canplaythrough')}
|
||||
on:waiting={() => console.log('waiting')}
|
||||
on:stalled={(e) => console.log('stalled', e)}
|
||||
on:emptied={(e) => console.log('emptied', e)}
|
||||
on:load={(e) => console.log('load', e)}
|
||||
/>
|
||||
<AudioA11yProgress {currentTime} {paused} {duration} />
|
||||
<slot {duration} />
|
||||
{/key}
|
||||
@@ -0,0 +1,80 @@
|
||||
<script lang="ts">
|
||||
import { usePlayer, type PlayerElement } from '$lib/components/audio/helper';
|
||||
import {
|
||||
_currentTime,
|
||||
_duration,
|
||||
_muted,
|
||||
_paused,
|
||||
_playbackRate,
|
||||
_seek,
|
||||
_src,
|
||||
_volume,
|
||||
} from '$lib/components/audio/state';
|
||||
|
||||
export let autoplay: boolean;
|
||||
let audioElement: PlayerElement;
|
||||
|
||||
let currentTime = 0;
|
||||
let paused = true;
|
||||
let playbackRate = 1;
|
||||
let muted = false;
|
||||
let volume = 0;
|
||||
let duration = 0;
|
||||
|
||||
$: usePlayer(audioElement, 'playbackRate', playbackRate);
|
||||
|
||||
function handleSeek(value: number) {
|
||||
if (value < 0) return;
|
||||
if (value > duration) return;
|
||||
currentTime = value;
|
||||
}
|
||||
|
||||
$: _currentTime.set(currentTime);
|
||||
$: _duration.set(duration);
|
||||
$: _paused.set(paused);
|
||||
|
||||
$: handleSeek($_seek);
|
||||
|
||||
$: volume = $_volume;
|
||||
$: muted = $_muted;
|
||||
$: playbackRate = $_playbackRate;
|
||||
$: paused = $_paused;
|
||||
</script>
|
||||
|
||||
{#key $_src}
|
||||
{#if $_src}
|
||||
<audio
|
||||
bind:this={audioElement}
|
||||
src={$_src}
|
||||
{autoplay}
|
||||
bind:currentTime
|
||||
bind:duration
|
||||
bind:paused
|
||||
bind:muted
|
||||
bind:volume
|
||||
preload="metadata"
|
||||
controls={false}
|
||||
on:seeked={() => _seek.set(-1)}
|
||||
on:timeupdate={() => console.log('progress', { currentTime })}
|
||||
on:ratechange={() => console.log('rateChange', { playbackRate })}
|
||||
on:ended={() => console.log('finished')}
|
||||
on:playing={() => console.log('playing')}
|
||||
on:pause={() => console.log('pause')}
|
||||
on:durationchange={() => console.log('durationchange')}
|
||||
on:loadeddata={() => console.log('loaded data')}
|
||||
on:loadedmetadata={() => console.log('loadedmetadata')}
|
||||
on:loadstart={() => console.log('load start')}
|
||||
on:seeking={() => console.log('seeking')}
|
||||
on:suspend={() => console.log('suspend')}
|
||||
on:volumechange={() => console.log('volumechange')}
|
||||
on:play={() => console.log('play')}
|
||||
on:canplay={() => console.log('canplay')}
|
||||
on:canplaythrough={() => console.log('canplaythrough')}
|
||||
on:waiting={() => console.log('waiting')}
|
||||
on:stalled={(e) => console.log('stalled', e)}
|
||||
on:emptied={(e) => console.log('emptied', e)}
|
||||
on:load={(e) => console.log('load', e)}
|
||||
/>
|
||||
<!-- <AudioA11yProgress {currentTime} {paused} {duration} /> -->
|
||||
{/if}\
|
||||
{/key}
|
||||
@@ -3,7 +3,7 @@ export type PlayerElement = HTMLAudioElement | undefined;
|
||||
export function usePlayer<K extends keyof HTMLAudioElement>(
|
||||
el: PlayerElement,
|
||||
key: K,
|
||||
value: HTMLAudioElement[K]
|
||||
value: HTMLAudioElement[K],
|
||||
) {
|
||||
if (!el) return;
|
||||
el[key] = value;
|
||||
@@ -0,0 +1,115 @@
|
||||
import clamp from 'just-clamp';
|
||||
import { derived, writable } from 'svelte/store';
|
||||
|
||||
export const _src = writable<string | undefined>(undefined);
|
||||
export const _duration = writable<number>(0);
|
||||
|
||||
export const _currentTime = writable<number>(0);
|
||||
export const _muted = writable<boolean>(false);
|
||||
export const _paused = writable<boolean>(true);
|
||||
export const _playbackRate = writable<number>(1);
|
||||
export const _seek = writable<number>(0);
|
||||
export const _volume = writable<number>(1);
|
||||
|
||||
const state = derived(
|
||||
[_src, _currentTime, _duration, _muted, _paused, _playbackRate, _volume, _seek],
|
||||
([$src, $currentTime, $duration, $muted, $paused, $playbackRate, $volume, $seek]) => {
|
||||
const currentTime = $currentTime > $duration ? $duration : $currentTime;
|
||||
|
||||
return {
|
||||
src: $src,
|
||||
duration: $duration,
|
||||
|
||||
currentTime,
|
||||
muted: $muted,
|
||||
paused: $paused,
|
||||
playbackRate: $playbackRate,
|
||||
seek: $seek,
|
||||
volume: $volume,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
type AudioState = Parameters<Parameters<(typeof state)['subscribe']>[0]>[0];
|
||||
type PlayerState = Omit<AudioState, 'src' | 'duration'>;
|
||||
const default_player_state: PlayerState = {
|
||||
currentTime: 0,
|
||||
muted: false,
|
||||
paused: true,
|
||||
playbackRate: 1,
|
||||
seek: 0,
|
||||
volume: 1,
|
||||
};
|
||||
|
||||
export function resetAudio() {
|
||||
_currentTime.set(0);
|
||||
_duration.set(0);
|
||||
_muted.set(false);
|
||||
_paused.set(true);
|
||||
_playbackRate.set(1);
|
||||
_volume.set(1);
|
||||
}
|
||||
|
||||
function set_player_state(opts?: Partial<PlayerState>) {
|
||||
_currentTime.set(opts?.currentTime ?? default_player_state.currentTime);
|
||||
_muted.set(opts?.muted ?? default_player_state.muted);
|
||||
_paused.set(opts?.paused ?? default_player_state.paused);
|
||||
_playbackRate.set(opts?.playbackRate ?? default_player_state.playbackRate);
|
||||
_volume.set(opts?.volume ?? default_player_state.volume);
|
||||
_seek.set(opts?.seek ?? default_player_state.seek);
|
||||
}
|
||||
|
||||
function unload() {
|
||||
set_player_state();
|
||||
_duration.set(0);
|
||||
_src.set(undefined);
|
||||
}
|
||||
|
||||
function load(src: string, opts?: Partial<PlayerState>) {
|
||||
set_player_state(opts);
|
||||
_src.set(src);
|
||||
}
|
||||
|
||||
function play() {
|
||||
// Incase of a missmatch between the html and js, we first pause and then play
|
||||
_paused.set(true);
|
||||
_paused.set(false);
|
||||
}
|
||||
function pause() {
|
||||
// Incase of a missmatch between the html and js, we first play and then pause
|
||||
_paused.set(false);
|
||||
_paused.set(true);
|
||||
}
|
||||
|
||||
export const audio = {
|
||||
subscribe: state.subscribe,
|
||||
currentTime: { subscribe: _currentTime.subscribe },
|
||||
duration: { subscribe: _duration.subscribe },
|
||||
muted: { subscribe: _muted.subscribe },
|
||||
paused: { subscribe: _paused.subscribe },
|
||||
playbackRate: { subscribe: _playbackRate.subscribe },
|
||||
volume: { subscribe: _volume.subscribe },
|
||||
|
||||
load,
|
||||
unload,
|
||||
|
||||
seek: (value: number) => {
|
||||
console.log('seek', value);
|
||||
// let duration = 0
|
||||
// _duration.subscribe(d => duration = d)
|
||||
return _duration.subscribe((dur) => {
|
||||
_seek.set(clamp(0, dur, value));
|
||||
});
|
||||
},
|
||||
|
||||
toggle_mute: () => _muted.update((previous) => !previous),
|
||||
unmute: () => _muted.set(false),
|
||||
mute: () => _muted.set(true),
|
||||
|
||||
toggle_pause: () => _paused.update((previous) => !previous),
|
||||
play,
|
||||
pause: () => _paused.set(true),
|
||||
|
||||
setVolume: (value: number) => _volume.set(clamp(0, 1, value)),
|
||||
setPlaybackRate: (value: number) => _playbackRate.set(clamp(0, 10, value)),
|
||||
};
|
||||
Reference in New Issue
Block a user