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)),
|
||||
};
|
||||
+39
-47
@@ -1,67 +1,59 @@
|
||||
<script lang="ts">
|
||||
import Audio from '$lib/components/audio.svelte';
|
||||
import Audio from '$lib/components/audio/audio.svelte';
|
||||
import { audio, _currentTime, _duration, _paused } from '$lib/components/audio/state';
|
||||
|
||||
const sources = {
|
||||
syntax: '/example-syntax.mp3',
|
||||
knomii: '/example-knomii.mp3'
|
||||
knomii: '/example-knomii.mp3',
|
||||
} as const;
|
||||
|
||||
let playbackRate = 1;
|
||||
let volume = 0.5;
|
||||
let paused = true;
|
||||
let currentTime = 0;
|
||||
let src = '';
|
||||
</script>
|
||||
|
||||
<pre>
|
||||
{JSON.stringify($audio, null, 3)}
|
||||
</pre>
|
||||
|
||||
<h1>Demo</h1>
|
||||
|
||||
<h5>Native audio controls</h5>
|
||||
<Audio
|
||||
on:progress={(e) => console.log(e.detail)}
|
||||
{src}
|
||||
autoplay={false}
|
||||
{volume}
|
||||
{playbackRate}
|
||||
{paused}
|
||||
bind:currentTime
|
||||
let:duration
|
||||
<Audio on:progress={(e) => console.log(e.detail)} autoplay={false} />
|
||||
<progress
|
||||
style="width: 960px; max-width:100%"
|
||||
data-paused={$_paused ? 'true' : 'false'}
|
||||
max={$_duration}
|
||||
value={$_currentTime}
|
||||
/>
|
||||
|
||||
<h5>Load Audio</h5>
|
||||
<button type="button" on:click={() => audio.load(sources['syntax'], { paused: false })}
|
||||
>Syntax</button
|
||||
>
|
||||
<progress
|
||||
style="width: 800px; max-width:100%"
|
||||
data-paused={paused ? 'true' : 'false'}
|
||||
max={duration}
|
||||
value={currentTime}
|
||||
/>
|
||||
<button type="button" on:click={() => audio.load(sources['knomii'], { paused: false })}
|
||||
>Knomii</button
|
||||
>
|
||||
<button type="button" on:click={() => audio.unload()}>None</button>
|
||||
|
||||
<h5>Load Audio</h5>
|
||||
<button type="button" on:click={() => (src = sources['syntax'])}>Syntax</button>
|
||||
<button type="button" on:click={() => (src = sources['knomii'])}>Knomii</button>
|
||||
<button type="button" on:click={() => (src = '')}>None</button>
|
||||
<h5>Custom audio controls</h5>
|
||||
|
||||
<h5>Custom audio controls</h5>
|
||||
<h6>Audio Actions</h6>
|
||||
|
||||
<h6>Audio Actions</h6>
|
||||
<button type="button" on:click={audio.play}>Play</button>
|
||||
<button type="button" on:click={audio.pause}>Pause</button>
|
||||
<button type="button" on:click={audio.toggle_pause}>Toggle</button>
|
||||
|
||||
<button type="button" on:click={() => (paused = false)}>Play</button>
|
||||
<button type="button" on:click={() => (paused = true)}>Pause</button>
|
||||
<button type="button" on:click={() => (paused = !paused)}>Toggle</button>
|
||||
<h6>Seeking</h6>
|
||||
|
||||
<h6>Seeking</h6>
|
||||
|
||||
<button type="button" on:click={() => (currentTime = currentTime + 5)}>Skip 5s</button>
|
||||
<button type="button" on:click={() => audio.seek(30)}>Go to 30s</button>
|
||||
<!-- <button type="button" on:click={() => (currentTime = currentTime + 5)}>Skip 5s</button>
|
||||
<button type="button" on:click={() => (currentTime = currentTime - 5)}>Rewind 5s</button>
|
||||
<button type="button" on:click={() => (currentTime = 30)}>Go to 30s</button>
|
||||
<button type="button" on:click={() => (currentTime = duration - 30)}>Go to 30s before end</button>
|
||||
<button type="button" on:click={() => (currentTime = duration - 30)}>Go to 30s before end</button> -->
|
||||
|
||||
<h6>Playback Rate</h6>
|
||||
<h6>Playback Rate</h6>
|
||||
|
||||
{#each [0.5, 1, 2, 3] as rate}
|
||||
<button type="button" on:click={() => (playbackRate = rate)}>{rate}x</button>
|
||||
{/each}
|
||||
{#each [0.5, 1, 2, 3] as rate}
|
||||
<button type="button" on:click={() => audio.setPlaybackRate(rate)}>{rate}x</button>
|
||||
{/each}
|
||||
|
||||
<h6>Volume</h6>
|
||||
<h6>Volume</h6>
|
||||
|
||||
{#each [0, 0.25, 0.5, 0.75, 1] as v}
|
||||
<button type="button" on:click={() => (volume = v)}>{v * 100}%</button>
|
||||
{/each}
|
||||
</Audio>
|
||||
{#each [0, 0.25, 0.5, 0.75, 1] as v}
|
||||
<button type="button" on:click={() => audio.setVolume(v)}>{v * 100}%</button>
|
||||
{/each}
|
||||
|
||||
Reference in New Issue
Block a user