@onnie81/murdoku-spor 1.2.3 → 1.2.5

package/client/src/audio.js

@@ -7,6 +7,12 @@ let master, sfxBus, musicBus, analyser;
 let enabled = { sfx: true, music: true };
 let musicOn = false;
 let schedTimer = null;
+let outEl = null; // iOS: audio leaves through a media element, not ctx.destination
+
+// iPadOS pretends to be MacIntel, hence the maxTouchPoints check
+const IS_IOS = typeof navigator !== 'undefined' &&
+  (/iP(hone|ad|od)/.test(navigator.userAgent) ||
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1));
 
 function ensureCtx() {
   if (ctx) return ctx;
@@ -15,7 +21,21 @@ function ensureCtx() {
   ctx = new AC();
   master = ctx.createGain();
   master.gain.value = 0.9;
-  master.connect(ctx.destination);
+  if (IS_IOS) {
+    // Direct WebAudio output is unreliable on iOS (silent-switch category and
+    // sample-rate mismatches can mute it entirely while the graph keeps
+    // "playing"). Routing through a MediaStream + <audio> element uses the
+    // real media playback path: audible, and immune to the ring switch.
+    const dest = ctx.createMediaStreamDestination();
+    master.connect(dest);
+    outEl = document.createElement('audio');
+    outEl.setAttribute('playsinline', '');
+    outEl.autoplay = true;
+    outEl.srcObject = dest.stream;
+    document.body.appendChild(outEl);
+  } else {
+    master.connect(ctx.destination);
+  }
   analyser = ctx.createAnalyser();
   analyser.fftSize = 2048;
   master.connect(analyser);
@@ -40,22 +60,8 @@ function ensureCtx() {
   return ctx;
 }
 
-// iOS: playing a (nearly) silent media element inside the gesture switches the
-// audio session to "playback", so WebAudio stays audible even with the ring
-// switch on silent. One-time, invisible.
-const SILENT_WAV = 'data:audio/wav;base64,UklGRiQAAABXQVZFZm10IBAAAAABAAEAQB8AAIA+AAACABAAZGF0YQAAAAA=';
-let mediaUnlocked = false;
-function unlockMediaSession() {
-  if (mediaUnlocked) return;
-  mediaUnlocked = true;
-  try {
-    const a = document.createElement('audio');
-    a.setAttribute('playsinline', '');
-    a.src = SILENT_WAV;
-    a.volume = 0.01;
-    const p = a.play();
-    if (p && p.catch) p.catch(() => { mediaUnlocked = false; });
-  } catch { mediaUnlocked = false; }
+function unlocked() {
+  return ctx && ctx.state === 'running' && (!IS_IOS || (outEl && !outEl.paused));
 }
 
 export function initAudioOnGesture() {
@@ -63,22 +69,31 @@ export function initAudioOnGesture() {
   const kick = () => {
     const c = ensureCtx();
     if (!c) return;
-    unlockMediaSession();
+    // both calls must happen inside the user gesture
+    if (outEl && outEl.paused) {
+      const p = outEl.play();
+      if (p && p.catch) p.catch(() => {});
+    }
     const go = () => {
-      if (c.state !== 'running') return; // keep listeners until truly unlocked
+      if (!unlocked()) return; // keep listening until truly audible
       EVENTS.forEach(ev => window.removeEventListener(ev, kick));
       if (enabled.music) startMusic();
     };
     if (c.state === 'suspended') c.resume().then(go).catch(() => {});
-    else go();
+    else setTimeout(go, 50);
   };
   EVENTS.forEach(ev => window.addEventListener(ev, kick));
 
-  // phones suspend the context when the tab goes to background — resume on return
+  // phones suspend audio when the tab goes to background — restore on return
   document.addEventListener('visibilitychange', () => {
-    if (!document.hidden && ctx && ctx.state === 'suspended') {
+    if (document.hidden || !ctx) return;
+    if (ctx.state === 'suspended') {
       ctx.resume().then(() => { if (enabled.music) startMusic(); }).catch(() => {});
     }
+    if (outEl && outEl.paused) {
+      const p = outEl.play();
+      if (p && p.catch) p.catch(() => {});
+    }
   });
 }
 
@@ -144,6 +159,10 @@ export function sfx(name) {
   const c = ensureCtx();
   if (!c) return;
   if (c.state === 'suspended') c.resume();
+  if (outEl && outEl.paused) {
+    const p = outEl.play();
+    if (p && p.catch) p.catch(() => {});
+  }
   switch (name) {
     case 'place': // soft wooden tap + warm blip
       noise({ d: 0.05, peak: 0.25, freq: 900, q: 0.8, type: 'lowpass' });
@@ -302,6 +321,8 @@ if (typeof window !== 'undefined') {
     state: () => (ctx ? ctx.state : 'none'),
     musicOn: () => musicOn,
     enabled: () => ({ ...enabled }),
+    route: () => (IS_IOS ? (outEl ? (outEl.paused ? 'ios-media:paused' : 'ios-media:playing') : 'ios-media:missing') : 'direct'),
+    rate: () => (ctx ? ctx.sampleRate : 0),
     rms() {
       if (!analyser) return 0;
       const a = new Float32Array(analyser.fftSize);

package/client/src/components/SettingsView.jsx

@@ -87,11 +87,24 @@ export function SettingsView() {
       <div className="card">
         <div className="card-head"><h2>{t('about')}</h2></div>
         <p className="muted">{t('aboutText')}</p>
+        <AudioDebugLine />
       </div>
     </div>
   );
 }
 
+function AudioDebugLine() {
+  const [, force] = useState(0);
+  const a = typeof window !== 'undefined' ? window.__mdkAudio : null;
+  if (!a) return null;
+  return (
+    <p className="muted" style={{ fontSize: '0.72rem', marginTop: 8 }}
+      onClick={() => force(x => x + 1)}>
+      audio: {a.state()} · {a.route()} · {a.rate()}Hz · music {a.musicOn() ? 'on' : 'off'} · rms {a.rms().toFixed(4)}
+    </p>
+  );
+}
+
 function AccountPanel() {
   const app = useApp();
   const [mode, setMode] = useState('signup');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onnie81/murdoku-spor",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "type": "module",
   "description": "Murdoku — online murder-mystery logic puzzle (sudoku-style placement deduction). Deploy artifact for games.onniehex.dev.",
   "license": "MIT",