From 8db4f5a5a1e05703c147e819c43cde993de64fc4 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Sun, 2 Aug 2026 22:13:54 +0200
Subject: [PATCH] chore: ios playback improvements pt. 1

---
 src/components/engine/audio/element.js | 32 +++++++++-------
 tests/components/engine/audio/test.ts  | 52 ++++++++++++++++++++++++++
 2 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/src/components/engine/audio/element.js b/src/components/engine/audio/element.js
index 5f66cfe7..2735d224 100644
--- a/src/components/engine/audio/element.js
+++ b/src/components/engine/audio/element.js
@@ -19,6 +19,15 @@ import { computed, signal, untracked } from "~/common/signal.js";
 const SILENT_MP3 =
   "data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU2LjM2LjEwMAAAAAAAAAAAAAAA//OEAAAAAAAAAAAAAAAAAAAAAAAASW5mbwAAAA8AAAAEAAABIADAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDV1dXV1dXV1dXV1dXV1dXV1dXV1dXV1dXV6urq6urq6urq6urq6urq6urq6urq6urq6v////////////////////////////////8AAAAATGF2YzU2LjQxAAAAAAAAAAAAAAAAJAAAAAAAAAAAASDs90hvAAAAAAAAAAAAAAAAAAAA//MUZAAAAAGkAAAAAAAAA0gAAAAATEFN//MUZAMAAAGkAAAAAAAAA0gAAAAARTMu//MUZAYAAAGkAAAAAAAAA0gAAAAAOTku//MUZAkAAAGkAAAAAAAAA0gAAAAANVVV";
 
+/**
+ * Mobile Safari caps the number of live media elements and behaves poorly
+ * when fresh <audio> nodes are created on every track change. On iOS we
+ * therefore render a single <audio> element and reuse its DOM node across
+ * track switches instead of keying one per item id.
+ */
+const IS_IOS = /iPhone|iPad|iPod/.test(navigator.userAgent) ||
+  (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+
 ////////////////////////////////////////////
 // ELEMENT
 ////////////////////////////////////////////
@@ -35,15 +44,6 @@ class AudioEngine extends BroadcastableDiffuseElement {
     this.state = this.state.bind(this);
   }
 
-  /**
-   * Mobile Safari caps the number of live media elements and behaves poorly
-   * when fresh <audio> nodes are created on every track change. On iOS we
-   * therefore render a single <audio> element and reuse its DOM node across
-   * track switches instead of keying one per item id.
-   */
-  #isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent) ||
-    (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
-
   /** @type {Map<string, string>} MediaSource object URLs created from streams, keyed by item ID */
   #mediaSourceUrls = new Map();
 
@@ -344,7 +344,7 @@ class AudioEngine extends BroadcastableDiffuseElement {
     // the reused node's state and force a reload of its <source>.
     const oldActive = this.#items.value.find((a) => !a.isPreload);
     const newActive = resolvedAudio.find((a) => !a.isPreload);
-    const activeReplaced = this.#isIOS && oldActive && newActive &&
+    const activeReplaced = IS_IOS && oldActive && newActive &&
       (oldActive.id !== newActive.id || oldActive.url !== newActive.url);
 
     if (hasNewIds || hasPreloadChanges || hasUrlChanges) {
@@ -533,7 +533,7 @@ class AudioEngine extends BroadcastableDiffuseElement {
     // On iOS, only the active (non-preload) track gets an <audio> element —
     // preloading via extra media elements is unreliable on mobile Safari and
     // eats into its media-element cap.
-    const items = this.#isIOS
+    const items = IS_IOS
       ? allItems.filter((i) => !i.isPreload)
       : allItems;
 
@@ -555,10 +555,10 @@ class AudioEngine extends BroadcastableDiffuseElement {
       return keyed(
         // On iOS, reuse a single <de-audio-item>/<audio> DOM node across
         // track changes by keying on a stable value rather than the audio id.
-        this.#isIOS ? "active" : audio.id,
+        IS_IOS ? "active" : audio.id,
         html`
           <de-audio-item
-            group="${this.broadcasted ? `${group}/${this.#isIOS ? "active" : audio.id}` : nothing}"
+            group="${this.broadcasted ? `${group}/${IS_IOS ? "active" : audio.id}` : nothing}"
             id="${audio.id}"
             initial-progress="${ip}"
             mime-type="${audio.mimeType ? audio.mimeType : nothing}"
@@ -567,7 +567,6 @@ class AudioEngine extends BroadcastableDiffuseElement {
           >
             <audio
               crossorigin="anonymous"
-              muted="true"
               preload="auto"
             >
               ${audio.url
@@ -929,6 +928,11 @@ class AudioEngineItem extends BroadcastableDiffuseElement {
    * @param {Event} event
    */
   playingEvent(event) {
+    const audio = /** @type {HTMLAudioElement} */ (event.target);
+    const item = engineItem(audio);
+
+    item?.$state.isPlaying.set(true);
+
     finishedLoading(event);
   }
 
diff --git a/tests/components/engine/audio/test.ts b/tests/components/engine/audio/test.ts
index 9190b094..eb5057a0 100644
--- a/tests/components/engine/audio/test.ts
+++ b/tests/components/engine/audio/test.ts
@@ -564,4 +564,56 @@ describe("components/engine/audio", () => {
 
     expect(result).toBe(false);
   });
+
+  it("playing event sets isPlaying to true", async () => {
+    const result = await testWeb(async () => {
+      const mod = await import("~/components/engine/audio/element.js");
+      const { trackA } = await import("~/testing/sample/tracks.js");
+      const engine = new mod.CLASS();
+      document.body.append(engine);
+
+      engine.supply({
+        audio: [{
+          id: "audio-a",
+          url: "/testing/sample/audio.mp3",
+          isPreload: false,
+          track: trackA,
+        }],
+      });
+
+      const audioEl = engine.querySelector(
+        'de-audio-item[id="audio-a"]:not([preload]) audio',
+      ) as HTMLAudioElement;
+
+      await new Promise<void>((resolve, reject) => {
+        const st = engine.state("audio-a");
+        if (st?.loadingState() === "loaded") { resolve(); return; }
+        const timer = setTimeout(() => reject(new Error("timeout")), 10000);
+        const done = () => { clearTimeout(timer); resolve(); };
+        audioEl.addEventListener("canplay", done, { once: true });
+        audioEl.addEventListener("suspend", done, { once: true });
+        audioEl.addEventListener(
+          "error",
+          () => { clearTimeout(timer); reject(new Error("audio load error")); },
+          { once: true },
+        );
+      });
+
+      // Pause first so isPlaying is false, then dispatch `playing` to verify
+      // that playingEvent sets isPlaying to true on its own.
+      engine.play({ audioId: "audio-a", volume: 0.5 });
+      engine.pause({ audioId: "audio-a" });
+
+      await new Promise<void>((resolve) => setTimeout(resolve, 50));
+      const isPlayingBefore = engine.state("audio-a")?.isPlaying();
+
+      audioEl.dispatchEvent(new Event("playing"));
+      const isPlayingAfter = engine.state("audio-a")?.isPlaying();
+
+      return { isPlayingBefore, isPlayingAfter };
+    });
+
+    expect(result.isPlayingBefore).toBe(false);
+    expect(result.isPlayingAfter).toBe(true);
+  });
 });
-- 
2.51.2