diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index d1e22e3d..50784575 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -53,7 +53,10 @@
 
   $effect(() => {
     if (!audioEl) return;
-    if (player.isPlaying) {
+    // "Intent to play" = loading or playing. During 'loading' the DOM hasn't
+    // emitted 'playing' yet, but we still need to call play() to get there.
+    const intent = player.state === 'playing' || player.state === 'loading';
+    if (intent) {
       audioEl.play().catch(() => { /* interrupted / blocked — store gets the event */ });
     } else {
       audioEl.pause();