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
src/routes/+page.svelte
+39 -47
View File
@@ -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}