Default the live player to sound-on instead of muted

Drops the muted attribute and tries an unmuted autoplay first; if the browser blocks unmuted autoplay (no prior user gesture on the page), falls back to muted playback and syncs the mute button label to match. Once a viewer unmutes once, later clip switches keep playing with sound. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0144MiJ2cLjMd9jWaeEpVfUJ

Default the live player to sound-on instead of muted
Drops the muted attribute and tries an unmuted autoplay first; if the browser blocks unmuted autoplay (no prior user gesture on the page), falls back to muted playback and syncs the mute button label to match. Once a viewer unmutes once, later clip switches keep playing with sound. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0144MiJ2cLjMd9jWaeEpVfUJ
yibo
1 parent e303b2e4
Showing 2 changed files with 64 additions and 53 deletions
library.json
live.html
@@ -199,7 +199,7 @@
     "likes": 0,
     "createdAt": 1788192913244,
     "promptEn": "scholar cornered but still defiant",
-    "lastPlayedAt": 1788250669748
+    "lastPlayedAt": 1788253347544
   },
   {
     "id": "bbf7efb467e0",
@@ -364,7 +364,7 @@
     "likes": 0,
     "createdAt": 1788185090875,
     "promptEn": "woman in white cold and threatening",
-    "lastPlayedAt": 1788251808852
+    "lastPlayedAt": 1788253487611
   },
   {
     "id": "a46f1daa9ee0",
@@ -379,7 +379,7 @@
     "likes": 0,
     "createdAt": 1788181569491,
     "promptEn": "a massive warship glides through the stars, the bridge suddenly shakes hard",
-    "lastPlayedAt": 1788251214448
+    "lastPlayedAt": 1788253093423
   },
   {
     "id": "44bf5b969e94",
@@ -409,7 +409,7 @@
     "likes": 0,
     "createdAt": 1788160917846,
     "promptEn": "woman in old chinese robe talking, gentle but wary, in an old room",
-    "lastPlayedAt": 1788251177165
+    "lastPlayedAt": 1788253241500
   },
   {
     "id": "24e49e5ae069",
@@ -529,7 +529,7 @@
     "likes": 0,
     "createdAt": 1788120171725,
     "promptEn": "constable bursts in and blocks the door, talks to a pale woman behind the screen",
-    "lastPlayedAt": 1788249899449
+    "lastPlayedAt": 1788253571659
   },
   {
     "id": "5c364152e54c",
@@ -769,7 +769,7 @@
     "likes": 0,
     "createdAt": 1788026068497,
     "promptEn": "black-haired prince in a red cloak, pressing down an execution order in the trial hall",
-    "lastPlayedAt": 1788251740816
+    "lastPlayedAt": 1788253425586
   },
   {
     "id": "0a5e37bb328c",
@@ -799,7 +799,7 @@
     "likes": 0,
     "createdAt": 1788025640972,
     "promptEn": "Voldemort in a graveyard, wand raised, stepping closer",
-    "lastPlayedAt": 1788252161011
+    "lastPlayedAt": 1788253469603
   },
   {
     "id": "c3875fbd6cc4",
@@ -859,7 +859,7 @@
     "likes": 0,
     "createdAt": 1788025623833,
     "promptEn": "cat-eared white-haired guard crouching in a ruined palace, purple aura around them",
-    "lastPlayedAt": 1788251424585
+    "lastPlayedAt": 1788253528965
   },
   {
     "id": "0d721acbc298",
@@ -874,7 +874,7 @@
     "likes": 0,
     "createdAt": 1788025622363,
     "promptEn": "detective in a surveillance room squinting at the monitors",
-    "lastPlayedAt": 1788250159958
+    "lastPlayedAt": 1788253255505
   },
   {
     "id": "639069dea7c5",
@@ -949,7 +949,7 @@
     "likes": 0,
     "createdAt": 1788024747209,
     "promptEn": "wounded hunter leaning on a subway turnstile, ordering you into the tunnel",
-    "lastPlayedAt": 1788252002941
+    "lastPlayedAt": 1788253507622
   },
   {
     "id": "fdefca4e4980",
@@ -1114,7 +1114,7 @@
     "likes": 0,
     "createdAt": 1788014790969,
     "promptEn": "pirate negotiation, stayed passive and got cornered",
-    "lastPlayedAt": 1788251730808
+    "lastPlayedAt": 1788253191467
   },
   {
     "id": "e14fe7c3220e",
@@ -1144,7 +1144,7 @@
     "likes": 0,
     "createdAt": 1788014336515,
     "promptEn": "captain's cabin on the Black Pearl, surrounded by pirates, negotiation could turn into an execution",
-    "lastPlayedAt": 1788250666207
+    "lastPlayedAt": 1788253087383
   },
   {
     "id": "eae105ee1204",
@@ -1564,7 +1564,7 @@
     "likes": 0,
     "createdAt": 1788008632603,
     "promptEn": "facing the Eternity Devil, went in head-on and got seen through",
-    "lastPlayedAt": 1788250580165
+    "lastPlayedAt": 1788253502782
   },
   {
     "id": "361c80537652",
@@ -1669,7 +1669,7 @@
     "likes": 0,
     "createdAt": 1788006964122,
     "promptEn": "grabbing an evidence flaw to counter L",
-    "lastPlayedAt": 1788251193178
+    "lastPlayedAt": 1788253259502
   },
   {
     "id": "0c6306b07f79",
@@ -1699,7 +1699,7 @@
     "likes": 0,
     "createdAt": 1788006252918,
     "promptEn": "facing L, stayed passive and the evidence pressure maxed out",
-    "lastPlayedAt": 1788251482641
+    "lastPlayedAt": 1788253113430
   },
   {
     "id": "0e28a7fecf03",
@@ -1984,7 +1984,7 @@
     "likes": 0,
     "createdAt": 1788002217928,
     "promptEn": "facing Reiner, stayed passive and got cornered",
-    "lastPlayedAt": 1788251696779
+    "lastPlayedAt": 1788253551648
   },
   {
     "id": "3fedf5531999",
@@ -2029,7 +2029,7 @@
     "likes": 0,
     "createdAt": 1788001428705,
     "promptEn": "in the ruins of Konoha, exploiting a flaw to counter Pain",
-    "lastPlayedAt": 1788251776833
+    "lastPlayedAt": 1788253511622
   },
   {
     "id": "e486fab4c24d",
@@ -2044,7 +2044,7 @@
     "likes": 0,
     "createdAt": 1788001285796,
     "promptEn": "in the ruins of Konoha, exploiting a flaw to counter Pain",
-    "lastPlayedAt": 1788252231046
+    "lastPlayedAt": 1788253477606
   },
   {
     "id": "808e89ca06a4",
@@ -2104,7 +2104,7 @@
     "likes": 0,
     "createdAt": 1788000341927,
     "promptEn": "Konoha destroyed by Shinra Tensei, Pain declaring order in the ruins",
-    "lastPlayedAt": 1788251102395
+    "lastPlayedAt": 1788253434714
   },
   {
     "id": "e245dbcc6d36",
@@ -2254,7 +2254,7 @@
     "likes": 0,
     "createdAt": 1787847447661,
     "promptEn": "constable tells the woman behind the screen he'll trust her tonight",
-    "lastPlayedAt": 1788250278003
+    "lastPlayedAt": 1788253581662
   },
   {
     "id": "8cb493338cb3",
@@ -2314,7 +2314,7 @@
     "likes": 0,
     "createdAt": 1787762311804,
     "promptEn": "constable sits with a cup of water, slowly looking up at the woman behind the screen",
-    "lastPlayedAt": 1788251410573
+    "lastPlayedAt": 1788253411575
   },
   {
     "id": "850f13881576",
@@ -2374,7 +2374,7 @@
     "likes": 0,
     "createdAt": 1787730413689,
     "promptEn": "constable grabs the oil lamp and hurls it at the portrait, the scroll catches fire",
-    "lastPlayedAt": 1788251572712
+    "lastPlayedAt": 1788253556971
   },
   {
     "id": "e6c23c6adc42",
@@ -2509,7 +2509,7 @@
     "likes": 0,
     "createdAt": 1787708663418,
     "promptEn": "constable catches his breath, thanks her, and rests on the couch while she watches",
-    "lastPlayedAt": 1788250466114
+    "lastPlayedAt": 1788253353548
   },
   {
     "id": "cd22c2b491fc",
@@ -2584,7 +2584,7 @@
     "likes": 0,
     "createdAt": 1787708626228,
     "promptEn": "constable drinks some water first, thanks her, watching the screen warily as he drinks",
-    "lastPlayedAt": 1788251160420
+    "lastPlayedAt": 1788253265514
   },
   {
     "id": "e08f7f7e54dd",
@@ -2689,7 +2689,7 @@
     "likes": 0,
     "createdAt": 1787674737743,
     "promptEn": "constable slowly looks around the room, discovers her watching him motionlessly through the screen",
-    "lastPlayedAt": 1788249837798
+    "lastPlayedAt": 1788253445593
   },
   {
     "id": "c74118d0413f",
@@ -2824,7 +2824,7 @@
     "likes": 0,
     "createdAt": 1787674623678,
     "promptEn": "constable bows to the screen, thanking her for sheltering him",
-    "lastPlayedAt": 1788251144418
+    "lastPlayedAt": 1788253536965
   },
   {
     "id": "d94991a1e21b",
@@ -2929,7 +2929,7 @@
     "likes": 0,
     "createdAt": 1787665100787,
     "promptEn": "constable politely asks the woman behind the screen for tea",
-    "lastPlayedAt": 1788250618187
+    "lastPlayedAt": 1788253439598
   },
   {
     "id": "d2c77b87b84b",
@@ -2959,7 +2959,7 @@
     "likes": 0,
     "createdAt": 1787642579766,
     "promptEn": "a summoner chants and calls a giant toad, which swallows the white-robed ghost whole",
-    "lastPlayedAt": 1788248777237
+    "lastPlayedAt": 1788253597668
   },
   {
     "id": "22a666455198",
@@ -3079,7 +3079,7 @@
     "likes": 0,
     "createdAt": 1787615241814,
     "promptEn": "xianxia character turning, only back and side profile shown",
-    "lastPlayedAt": 1788250526137
+    "lastPlayedAt": 1788253329541
   },
   {
     "id": "1a398591663e",
@@ -3289,7 +3289,7 @@
     "likes": 0,
     "createdAt": 1787588540567,
     "promptEn": "telescope view searching for a MiniMax device",
-    "lastPlayedAt": 1788248302814
+    "lastPlayedAt": 1788253197469
   },
   {
     "id": "ba8c0758e5b4",
@@ -3304,7 +3304,7 @@
     "likes": 0,
     "createdAt": 1787588114381,
     "promptEn": "underground rap duo freestyling at the camera",
-    "lastPlayedAt": 1788251744817
+    "lastPlayedAt": 1788253391568
   },
   {
     "id": "58a439a93c02",
@@ -3349,7 +3349,7 @@
     "likes": 0,
     "createdAt": 1787577088778,
     "promptEn": "man thanks the woman for taking him in",
-    "lastPlayedAt": 1788252149006
+    "lastPlayedAt": 1788253473612
   },
   {
     "id": "8d0270466c35",
@@ -3364,7 +3364,7 @@
     "likes": 0,
     "createdAt": 1787576943673,
     "promptEn": "man lowers his voice like she said, checks the door, window and lamp",
-    "lastPlayedAt": 1788251202953
+    "lastPlayedAt": 1788253482789
   },
   {
     "id": "396de15c1439",
@@ -3379,7 +3379,7 @@
     "likes": 0,
     "createdAt": 1787576943608,
     "promptEn": "man lowers his voice like she said, checks the door, window and lamp",
-    "lastPlayedAt": 1788249343532
+    "lastPlayedAt": 1788253343544
   },
   {
     "id": "cde82791f726",
@@ -3454,7 +3454,7 @@
     "likes": 0,
     "createdAt": 1787576013870,
     "promptEn": "man apologizes, says something outside was chasing him",
-    "lastPlayedAt": 1788241611137
+    "lastPlayedAt": 1788253385557
   },
   {
     "id": "7d425d2d35fb",
@@ -3739,7 +3739,7 @@
     "likes": 0,
     "createdAt": 1787470099635,
     "promptEn": "pointing at things at a beach market, they turn into hand-drawn animation",
-    "lastPlayedAt": 1788251368535
+    "lastPlayedAt": 1788253516965
   },
   {
     "id": "0fe0f2101c44",
@@ -3844,7 +3844,7 @@
     "likes": 0,
     "createdAt": 1787452521817,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788249657655
+    "lastPlayedAt": 1788253117433
   },
   {
     "id": "f36cdd73ff1b",
@@ -3859,7 +3859,7 @@
     "likes": 0,
     "createdAt": 1787450754171,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788249973852
+    "lastPlayedAt": 1788253279519
   },
   {
     "id": "fd0183c54763",
@@ -3979,7 +3979,7 @@
     "likes": 0,
     "createdAt": 1787426955312,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788248098632
+    "lastPlayedAt": 1788253219489
   },
   {
     "id": "734d28c52670",
@@ -4069,7 +4069,7 @@
     "likes": 0,
     "createdAt": 1787412952086,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788251143150
+    "lastPlayedAt": 1788253367553
   },
   {
     "id": "59fd7a087f5b",
@@ -4084,7 +4084,7 @@
     "likes": 0,
     "createdAt": 1787412606465,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788251848870
+    "lastPlayedAt": 1788253459597
   },
   {
     "id": "29a99dc412b2",
@@ -4174,7 +4174,7 @@
     "likes": 0,
     "createdAt": 1787384417941,
     "promptEn": "protagonist leaps across rooftops fleeing pursuers",
-    "lastPlayedAt": 1788248669135
+    "lastPlayedAt": 1788253405570
   },
   {
     "id": "2cf5c8e67510",
@@ -4219,7 +4219,7 @@
     "likes": 0,
     "createdAt": 1787375413623,
     "promptEn": "golden portal opens, man in green jacket throws a glowing spear",
-    "lastPlayedAt": 1788250362064
+    "lastPlayedAt": 1788253532966
   },
   {
     "id": "78e698c924b1",
@@ -4339,7 +4339,7 @@
     "likes": 0,
     "createdAt": 1787332047061,
     "promptEn": "golden portal opens, man in green jacket throws a glowing spear",
-    "lastPlayedAt": 1788251350521
+    "lastPlayedAt": 1788253407577
   },
   {
     "id": "a5688d8f5db3",
@@ -4354,7 +4354,7 @@
     "likes": 0,
     "createdAt": 1787330101793,
     "promptEn": "a red apple on a wooden table, cinematic lighting",
-    "lastPlayedAt": 1788252205039
+    "lastPlayedAt": 1788253473602
   },
   {
     "id": "0024d3c2d4cb",
@@ -4414,7 +4414,7 @@
     "likes": 0,
     "createdAt": 1787305544815,
     "promptEn": "transparent gaming mouse product film, blue and orange lighting",
-    "lastPlayedAt": 1788251648757
+    "lastPlayedAt": 1788253209480
   },
   {
     "id": "e23b04ac2c78",
@@ -4489,7 +4489,7 @@
     "likes": 0,
     "createdAt": 1787290119114,
     "promptEn": "misty Jiangnan old town at dawn, woman walking with an oil-paper umbrella",
-    "lastPlayedAt": 1788248170701
+    "lastPlayedAt": 1788253429580
   },
   {
     "id": "0f22388f7847",
@@ -4549,7 +4549,7 @@
     "likes": 0,
     "createdAt": 1787225897650,
     "promptEn": "constable burns the beauty portrait with the lamp, the door opens on its own",
-    "lastPlayedAt": 1788247380017
+    "lastPlayedAt": 1788253107430
   },
   {
     "id": "ed3663dcda7f",
@@ -4594,6 +4594,6 @@
     "likes": 0,
     "createdAt": 1787220579189,
     "promptEn": "gothic castle at night, vampire noble carries a princess, rose petals falling",
-    "lastPlayedAt": 1788252092980
+    "lastPlayedAt": 1788253381560
   }
 ]
 \ No newline at end of file
@@ -21,7 +21,7 @@
     <div class="spacer"></div>
     <div class="watching" id="watchingCount" hidden></div>
     <button class="topbar-pill" id="chatToggleBtn">✕ 聊天</button>
-    <button class="topbar-pill" id="muteBtn">🔇 静音</button>
+    <button class="topbar-pill" id="muteBtn">🔈 有声</button>
   </header>
   <div class="body" id="body">
@@ -38,7 +38,7 @@
           <span class="np-time" id="nowPlayingTime"></span>
           <div class="np-text" id="nowPlayingText">加载中…</div>
         </div>
-        <video id="player" autoplay muted playsinline></video>
+        <video id="player" autoplay playsinline></video>
       </div>
     </div>
@@ -114,6 +114,17 @@ muteBtn.addEventListener(&quot;click&quot;, () =&gt; {
   muteBtn.textContent = player.muted ? "🔇 静音" : "🔈 有声";
 });
+// Default to sound on. Chrome/Safari block unmuted autoplay without a prior
+// user gesture on the site, so if the unmuted play() rejects, fall back to
+// muted autoplay (always allowed) and let the button reflect the real state.
+function tryPlay() {
+  player.play().catch(() => {
+    player.muted = true;
+    muteBtn.textContent = "🔇 静音";
+    player.play().catch(() => {});
+  });
+}
+
 let chatClosed = false;
 chatToggleBtn.addEventListener("click", () => {
   chatClosed = !chatClosed;
@@ -253,7 +264,7 @@ function playBrowse(index) {
   currentIndex = index;
   const c = clips[index];
   player.src = `/lib/video/${c.id}`;
-  player.play().catch(() => {});
+  tryPlay();
   setNowPlaying(null, null, c.prompt);
   renderBrowseList();
 }
@@ -360,7 +371,7 @@ function switchToClip(clip, offsetSec, requestedBy) {
       { once: true }
     );
   }
-  player.play().catch(() => {});
+  tryPlay();
   setNowPlaying(requestedBy, fmtClock(Date.now()), clip.prompt);
 }