autoplay

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

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

web/src/routes/artist/[id]/SidePlayer.svelte

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