pen/docent
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

autoplay

Browse source
This commit is contained in:
Pen Anderson 2026-05-27 06:53:40 -05:00
parent a40e4d2211
commit 7bb21c245c
2 changed files with 15 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/routes/artist/[id]/+page.svelte
View file

@ -68,12 +68,16 @@
<div class="rule" aria-hidden="true"></div> <div class="rule" aria-hidden="true"></div>
<section class="shows"> <section class="shows">
{#each artist.shows as show (show.slug)} {#each artist.shows as show, showIdx (show.slug)}
<article class="show"> <article class="show">
<h2 class="show-caption">{show.caption}</h2> <h2 class="show-caption">{show.caption}</h2>
<div class="sides"> <div class="sides">
{#each show.sides as side (side.id)} {#each show.sides as side, sideIdx (side.id)}
<SidePlayer label={side.label} src={side.audio} /> <SidePlayer
label={side.label}
src={side.audio}
autoplay={showIdx === 0 && sideIdx === 0}
/>
{/each} {/each}
</div> </div>
</article> </article>

10
web/src/routes/artist/[id]/SidePlayer.svelte
View file

@ -2,8 +2,9 @@
type Props = { type Props = {
label: string; label: string;
src: string; src: string;
autoplay?: boolean;
}; };
let { label, src }: Props = $props(); let { label, src, autoplay = false }: Props = $props();
let audio: HTMLAudioElement | undefined = $state(); let audio: HTMLAudioElement | undefined = $state();
let paused = $state(true); let paused = $state(true);
@ -44,6 +45,11 @@
} }
} }
$effect(() => {
if (!autoplay || !audio) return;
audio.play().catch(() => undefined);
});
function fmt(s: number) { function fmt(s: number) {
if (!isFinite(s) || s < 0) return '0:00'; if (!isFinite(s) || s < 0) return '0:00';
const total = Math.floor(s); const total = Math.floor(s);
@ -113,7 +119,7 @@
bind:duration bind:duration
onloadstart={() => { errored = false; }} onloadstart={() => { errored = false; }}
oncanplay={() => { loading = false; }} oncanplay={() => { loading = false; }}
onwaiting={() => { loading = true; }} onwaiting={() => { if (!paused) loading = true; }}
onplaying={onPlaying} onplaying={onPlaying}
onerror={() => { loading = false; errored = true; }} onerror={() => { loading = false; errored = true; }}
onended={() => { paused = true; }} onended={() => { paused = true; }}