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

passes duration to slot props

Browse Source
This commit is contained in:
Ollie Taylor
2023-02-22 00:29:57 +00:00
parent 8afc23cbac
commit 07212fc671
2 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/audio.svelte
+1
View File
@@ -67,4 +67,5 @@
on:emptied={(e) => console.log('emptied', e)} on:emptied={(e) => console.log('emptied', e)}
on:load={(e) => console.log('load', e)} on:load={(e) => console.log('load', e)}
/> />
<slot {duration} />
{/key} {/key}
src/routes/+page.svelte
+21 -19
View File
@@ -19,30 +19,32 @@
{playbackRate} {playbackRate}
{paused} {paused}
bind:currentTime bind:currentTime
/> let:duration
>
<h5>Custom audio controls</h5>
<h5>Custom audio controls</h5> <h6>Audio Actions</h6>
<h6>Audio Actions</h6> <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>
<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={() => (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 = currentTime + 5)}>Skip 5s</button> <h6>Playback Rate</h6>
<button type="button" on:click={() => (currentTime = currentTime - 5)}>Rewind 5s</button>
<button type="button" on:click={() => (currentTime = 30)}>Go to 30s</button>
<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} <h6>Volume</h6>
<button type="button" on:click={() => (playbackRate = rate)}>{rate}x</button>
{/each}
<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 [0, 0.25, 0.5, 0.75, 1] as v} {/each}
<button type="button" on:click={() => (volume = v)}>{v * 100}%</button> </Audio>
{/each}