cyber-mawonaj/oki-podcast-reader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

saving progress before I try stupid stuff

Browse Source
This commit is contained in:
Ollie Taylor
2023-02-22 16:40:02 +00:00
parent 642ba31bb5
commit 21d140deb3
8 changed files with 244 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+4 -1
View File
@@ -47,5 +47,8 @@
}, },
"svelte": "./dist/index.js", "svelte": "./dist/index.js",
"types": "./dist/index.d.ts", "types": "./dist/index.d.ts",
"type": "module" "type": "module",
"dependencies": {
"just-clamp": "^4.2.0"
}
} }
src/lib/components/audio.svelte
-68
View File
@@ -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}
src/lib/components/audio-a11y-progress.svelte → src/lib/components/audio/audio-progress.svelte
View File
src/lib/components/audio/audio.svelte
+80
View File
@@ -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}
src/lib/components/audio.ts → src/lib/components/audio/helper.ts
+1 -1
View File
@@ -3,7 +3,7 @@ export type PlayerElement = HTMLAudioElement | undefined;
export function usePlayer<K extends keyof HTMLAudioElement>( export function usePlayer<K extends keyof HTMLAudioElement>(
el: PlayerElement, el: PlayerElement,
key: K, key: K,
value: HTMLAudioElement[K] value: HTMLAudioElement[K],
) { ) {
if (!el) return; if (!el) return;
el[key] = value; el[key] = value;
src/lib/components/audio/state.ts
+115
View File
@@ -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)),
};
src/routes/+page.svelte
+39 -47
View File
@@ -1,67 +1,59 @@
<script lang="ts"> <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 = { const sources = {
syntax: '/example-syntax.mp3', syntax: '/example-syntax.mp3',
knomii: '/example-knomii.mp3' knomii: '/example-knomii.mp3',
} as const; } as const;
let playbackRate = 1;
let volume = 0.5;
let paused = true;
let currentTime = 0;
let src = '';
</script> </script>
<pre>
{JSON.stringify($audio, null, 3)}
</pre>
<h1>Demo</h1> <h1>Demo</h1>
<h5>Native audio controls</h5> <Audio on:progress={(e) => console.log(e.detail)} autoplay={false} />
<Audio <progress
on:progress={(e) => console.log(e.detail)} style="width: 960px; max-width:100%"
{src} data-paused={$_paused ? 'true' : 'false'}
autoplay={false} max={$_duration}
{volume} value={$_currentTime}
{playbackRate} />
{paused}
bind:currentTime <h5>Load Audio</h5>
let:duration <button type="button" on:click={() => audio.load(sources['syntax'], { paused: false })}
>Syntax</button
> >
<progress <button type="button" on:click={() => audio.load(sources['knomii'], { paused: false })}
style="width: 800px; max-width:100%" >Knomii</button
data-paused={paused ? 'true' : 'false'} >
max={duration} <button type="button" on:click={() => audio.unload()}>None</button>
value={currentTime}
/>
<h5>Load Audio</h5> <h5>Custom audio controls</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> <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> <h6>Seeking</h6>
<button type="button" on:click={() => (paused = true)}>Pause</button>
<button type="button" on:click={() => (paused = !paused)}>Toggle</button>
<h6>Seeking</h6> <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)}>Skip 5s</button>
<button type="button" on:click={() => (currentTime = currentTime - 5)}>Rewind 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} {#each [0.5, 1, 2, 3] as rate}
<button type="button" on:click={() => (playbackRate = rate)}>{rate}x</button> <button type="button" on:click={() => audio.setPlaybackRate(rate)}>{rate}x</button>
{/each} {/each}
<h6>Volume</h6> <h6>Volume</h6>
{#each [0, 0.25, 0.5, 0.75, 1] as v} {#each [0, 0.25, 0.5, 0.75, 1] as v}
<button type="button" on:click={() => (volume = v)}>{v * 100}%</button> <button type="button" on:click={() => audio.setVolume(v)}>{v * 100}%</button>
{/each} {/each}
</Audio>
yarn.lock
+5
View File
@@ -1009,6 +1009,11 @@ json-stable-stringify-without-jsonify@^1.0.1:
resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651" resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw== integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
just-clamp@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/just-clamp/-/just-clamp-4.2.0.tgz#4dafc300d2f44685082b686f13deaa84d1c53b21"
integrity sha512-ssHiAxuN7R+VP7jS1XyUP7ju5YC4bTQwQdzYtuZkASTrKe9KsI/X0t+5BJeD6Un6z/dNMDFVNQpQEgUphpXa0w==
kleur@^4.1.5: kleur@^4.1.5:
version "4.1.5" version "4.1.5"
resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780" resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"