Fix speech playback on iOS Safari

README.md

@@ -20,6 +20,8 @@ When a character or NPC is created, its saved voice identity is masculine, femin
 
 System voice commands require the prefix `röstkommando`: `upprepa`, `avbryt`, `hjälp`, `alternativ`, or `paus`. Without the prefix, the same words remain ordinary dialogue. Speech recognition and synthesis are browser-dependent; release acceptance must record which real iPhone/Safari/VoiceOver and Android/Chrome/TalkBack combinations were actually checked.
 
+On iPhone and iPad, Safari may require a direct tap or key press before it permits speech output. The frontend primes speech silently on the first player gesture and then reads game replies automatically. If the first-visit introduction did not play, use **Läs introduktionen igen**; while playing, **Läs senaste repliken** in the voice settings is the recovery action if Safari blocks a reply. The introduction is only marked as heard after the browser reports that speech actually started. The speech queue avoids an immediate `cancel()` followed by `speak()`, which older WebKit releases can drop.
+
 The browser and API stay on the same public origin, `https://ai-spel.k3s.k0.nu`. The ingress routes `/` to this frontend service and routes `/api`, `/version`, and `/health` to the Rust service. That keeps the current server-side session cookie same-origin and avoids browser CORS configuration.
 
 ## Release flow

index.html

@@ -37,7 +37,8 @@
     <section id="auth" aria-labelledby="auth-heading">
       <h1 id="auth-heading">Svensk livssimulator</h1>
       <p id="auth-intro">Välkommen till en svensk, dialogbaserad livssimulator utan bilder. Världen beskrivs med ljud, dofter, temperatur, beröring och riktning. Skapa konto med ett användarnamn och ett lösenord på minst tolv tecken. Berätta sedan fritt om en vuxen person. Du får redigera och godkänna personens biografi och startplats. Spela genom att skriva eller tala vad du gör och frågar. Personer du möter kan minnas tidigare samtal. Spelets repliker läses automatiskt upp på svenska och finns kvar som text. Har du redan konto väljer du Logga in.</p>
-      <button type="button" id="auth-repeat-intro">Läs introduktionen igen</button>
+      <button type="button" id="auth-repeat-intro">Läs introduktionen</button>
+      <p id="auth-voice-status" role="status" aria-live="polite">På iPhone och iPad kan du behöva trycka på Läs introduktionen igen en gång för att aktivera uppläsningen.</p>
       <p id="auth-status" role="status" aria-live="polite" hidden></p>
       <form id="auth-form">
         <label>Användarnamn <input name="username" required minlength="3" maxlength="40" autocomplete="username"></label>
@@ -91,6 +92,7 @@
     const voiceSettingsKey = 'ai-spel.voice-settings.v2';
     let voiceSettings = window.GameVoice.loadSettings(localStorage, voiceSettingsKey, 'ai-spel.voice-settings.v1');
     let voiceController;
+    let speechActivatedByGesture = false;
     let audioContext;
     let voiceDisclosureAcknowledged = false;
     let adminOffset = 0;
@@ -149,7 +151,11 @@
         ? 'Jag kunde inte behandla det just nu. Försök igen om en liten stund.'
         : code || 'Ett tillfälligt fel uppstod. Försök igen om en liten stund.');
     }
-    function setVoiceStatus(message = '') { document.querySelector('#voice-status').textContent = message; }
+    function setVoiceStatus(message = '') {
+      document.querySelector('#voice-status').textContent = message;
+      const authVoiceStatus = document.querySelector('#auth-voice-status');
+      if (authVoiceStatus && !auth.hidden && message) authVoiceStatus.textContent = message;
+    }
     function refreshMicrophone() {
       const button = document.querySelector('#microphone');
       if (button) button.disabled = play.hidden || messageField.disabled || submitBusy;
@@ -191,6 +197,12 @@
         return submitMessage(text, 'voice');
       },
     });
+    function primeSpeechFromGesture(event) {
+      if (speechActivatedByGesture || !event.isTrusted) return;
+      speechActivatedByGesture = voiceController.activateFromUserGesture();
+    }
+    document.addEventListener('pointerdown', primeSpeechFromGesture, true);
+    document.addEventListener('keydown', primeSpeechFromGesture, true);
     persistVoiceSettings();
 
     function addVoiceButton(parent, label, handler) {
@@ -319,18 +331,32 @@
       adminView.hidden = false;
       document.querySelector('#version-footer').hidden = true;
     }
-    const introductionKey = 'ai-spel.introduction-heard.v1';
+    const introductionKey = 'ai-spel.introduction-heard.v2';
     function playFirstVisitIntroduction() {
       let alreadyHeard = false;
       try { alreadyHeard = localStorage.getItem(introductionKey) === 'true'; } catch (_) { /* Keep the intro available for this visit. */ }
       if (alreadyHeard) return;
-      const introduction = document.querySelector('#auth-intro').textContent;
-      if (voiceController.speak(introduction, {role: 'narrator', voiceIdentity: 'neutral'})) {
-        try { localStorage.setItem(introductionKey, 'true'); } catch (_) { /* The page text remains available. */ }
+      const isAppleMobile = /iPad|iPhone|iPod/i.test(navigator.userAgent)
+        || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+      if (isAppleMobile) {
+        document.querySelector('#auth-repeat-intro').textContent = 'Läs introduktionen';
+        return;
       }
+      const introduction = document.querySelector('#auth-intro').textContent;
+      voiceController.speak(introduction, {
+        role: 'narrator', voiceIdentity: 'neutral',
+        onStart() { try { localStorage.setItem(introductionKey, 'true'); } catch (_) { /* The page text remains available. */ } },
+      });
     }
     document.querySelector('#auth-repeat-intro').addEventListener('click', () => {
-      if (location.pathname !== '/admin') voiceController.speak(document.querySelector('#auth-intro').textContent, {role: 'narrator', voiceIdentity: 'neutral'});
+      if (location.pathname !== '/admin') {
+        voiceController.activateFromUserGesture();
+        const introduction = document.querySelector('#auth-intro').textContent;
+        voiceController.speak(introduction, {
+          role: 'narrator', voiceIdentity: 'neutral',
+          onStart() { try { localStorage.setItem(introductionKey, 'true'); } catch (_) { /* The page text remains available. */ } },
+        });
+      }
     });
     function explainAuthError(error, intent) {
       if (intent === 'register' && error?.message === 'username_unavailable') return 'Det användarnamnet används redan. Välj ett annat och försök igen.';

scripts/check-frontend.sh

@@ -12,6 +12,8 @@ grep -q 'id="auth-intro"' index.html
 grep -q 'Skapa konto med ett användarnamn och ett lösenord på minst tolv tecken' index.html
 grep -q 'id="auth-repeat-intro"' index.html
 grep -q 'function playFirstVisitIntroduction' index.html
+grep -q 'id="auth-voice-status" role="status" aria-live="polite"' index.html
+grep -q 'activateFromUserGesture' index.html
 grep -q "location.pathname !== '/admin'" index.html
 grep -q "if (options.speak !== false && location.pathname !== '/admin')" index.html
 grep -q 'id="microphone" aria-pressed="false"' index.html
@@ -20,6 +22,7 @@ grep -q "window.GameVoice.createVoiceController" index.html
 grep -q 'Jag förstår – starta mikrofonen' index.html
 grep -q 'supportsRecognition' voice.js
 grep -q 'characterVoiceProfile' voice.js
+grep -q 'WebKit versions before Safari 27' voice.js
 grep -q "voiceIdentity: speakingNpc.voice_identity" index.html
 grep -q "role: 'narrator', voiceIdentity: 'neutral'" index.html
 grep -q 'COPY voice.js /usr/share/nginx/html/voice.js' Dockerfile

tests/voice.test.cjs

@@ -14,6 +14,7 @@ function makeHarness({supported = true, tts = true, onTranscript = () => Promise
   const utterances = [];
   const states = [];
   const timers = new Map();
+  const timerDelays = new Map();
   let timerId = 0;
   class Recognition {
     constructor() { recognitions.push(this); }
@@ -31,8 +32,8 @@ function makeHarness({supported = true, tts = true, onTranscript = () => Promise
     cancel() { this.cancelled += 1; },
   } : undefined;
   const window = {
-    setTimeout(callback) { const id = ++timerId; timers.set(id, callback); return id; },
-    clearTimeout(id) { timers.delete(id); },
+    setTimeout(callback, delay = 0) { const id = ++timerId; timers.set(id, callback); timerDelays.set(id, delay); return id; },
+    clearTimeout(id) { timers.delete(id); timerDelays.delete(id); },
     speechSynthesis: synthesis,
     SpeechSynthesisUtterance: tts ? Utterance : undefined,
     SpeechRecognition: supported ? Recognition : undefined,
@@ -43,7 +44,14 @@ function makeHarness({supported = true, tts = true, onTranscript = () => Promise
     onState: (state, message) => states.push({state, message}),
     onTranscript,
   });
-  return {controller, recognitions, utterances, synthesis, states, timers};
+  return {
+    controller, recognitions, utterances, synthesis, states, timers,
+    runTimer(delay) {
+      const match = [...timerDelays.entries()].find(([, value]) => value === delay);
+      if (!match) throw new Error(`No timer found with delay ${delay}`);
+      timers.get(match[0])();
+    },
+  };
 }
 
 test('recognition is single-shot Swedish and sends only final transcript once', async () => {
@@ -122,6 +130,35 @@ test('TTS selects Swedish fallback, applies rate, and cancellation invalidates c
   assert.equal(h.controller.getState(), 'IDLE');
 });
 
+test('iOS user gesture primes speech silently and idle speech is not cancelled before speak', () => {
+  const h = makeHarness();
+  assert.equal(h.controller.activateFromUserGesture(), true);
+  assert.equal(h.synthesis.spoken[0].text, ' ');
+  assert.equal(h.synthesis.spoken[0].volume, 0);
+  const cancelledBeforeReply = h.synthesis.cancelled;
+  assert.equal(h.controller.speak('Ett svar efter nätverksanropet'), true);
+  assert.equal(h.synthesis.spoken.at(-1).text, 'Ett svar efter nätverksanropet');
+  assert.equal(h.synthesis.cancelled, cancelledBeforeReply);
+});
+
+test('replacing active speech waits one event-loop turn after WebKit cancel', () => {
+  const h = makeHarness();
+  h.controller.speak('Första repliken');
+  const cancelledBeforeReplace = h.synthesis.cancelled;
+  h.controller.speak('Nästa replik');
+  assert.equal(h.synthesis.cancelled, cancelledBeforeReplace + 1);
+  assert.notEqual(h.synthesis.spoken.at(-1).text, 'Nästa replik');
+  h.runTimer(100);
+  assert.equal(h.synthesis.spoken.at(-1).text, 'Nästa replik');
+});
+
+test('speech start timeout tells the player how to recover when mobile playback is blocked', () => {
+  const h = makeHarness();
+  h.controller.speak('En replik');
+  h.runTimer(4000);
+  assert.match(h.states.at(-1).message, /Tryck på Läs senaste repliken/);
+});
+
 test('character voice identity gives stable distinct masculine, feminine, and neutral timbres', () => {
   const profile = GameVoice.characterVoiceProfile;
   const masculine = profile('masculine', 'character-1');
@@ -138,6 +175,7 @@ test('narrator uses neutral pitch while character replies use their saved voice
   h.controller.update({mode: 'game-voice'});
   h.controller.speak('Berättarröst', {role: 'narrator', voiceIdentity: 'feminine', characterId: 'narrator'});
   h.controller.speak('NPC-replik', {voiceIdentity: 'masculine', characterId: 'npc-1'});
+  h.runTimer(100);
   assert.equal(h.utterances[0].pitch, 1);
   assert.ok(h.utterances[1].pitch < 1);
 });

voice.js

@@ -78,7 +78,10 @@
     let generation = 0;
     let recognition = null;
     let speechTimer = null;
+    let speechStartTimer = null;
     let listeningTimer = null;
+    let currentUtterance = null;
+    let speechPrimed = false;
 
     function setState(next, message = '') {
       state = next;
@@ -88,11 +91,34 @@
     function cancelSpeech() {
       generation += 1;
       if (speechTimer !== null) win.clearTimeout(speechTimer);
+      if (speechStartTimer !== null) win.clearTimeout(speechStartTimer);
       speechTimer = null;
-      try { win.speechSynthesis?.cancel(); } catch (_) { /* Best effort. */ }
+      speechStartTimer = null;
+      const wasQueued = currentUtterance !== null;
+      currentUtterance = null;
+      // WebKit versions before Safari 27 can discard a speak() queued in the
+      // same turn as cancel(). Do not clear an already-empty native queue.
+      if (wasQueued) {
+        try { win.speechSynthesis?.cancel(); } catch (_) { /* Best effort. */ }
+      }
       if (!recognition) setState('IDLE');
     }
 
+    function activateFromUserGesture() {
+      if (!win.speechSynthesis || !win.SpeechSynthesisUtterance) return false;
+      if (speechPrimed) return true;
+      // iOS Safari requires speech output to be initiated by a user gesture.
+      // Prime its speech channel silently on the first trusted tap/key press so
+      // later game replies can be spoken after the API response arrives.
+      try {
+        const primer = new win.SpeechSynthesisUtterance(' ');
+        primer.volume = 0;
+        win.speechSynthesis.speak(primer);
+        speechPrimed = true;
+        return true;
+      } catch (_) { return false; }
+    }
+
     function finishRecognition(token, message = '') {
       if (token !== generation) return;
       if (listeningTimer !== null) win.clearTimeout(listeningTimer);
@@ -181,8 +207,9 @@
     function speak(text, voiceOptions = {}) {
       if (!text || !win.speechSynthesis || !win.SpeechSynthesisUtterance) return false;
       stopListening();
-      cancelSpeech();
-      const token = generation;
+      const hadQueuedUtterance = currentUtterance !== null;
+      if (hadQueuedUtterance) cancelSpeech();
+      const token = ++generation;
       let utterance;
       try { utterance = new win.SpeechSynthesisUtterance(text); }
       catch (_) { setState('IDLE', 'Talsyntesen kunde inte startas. Dialogen finns kvar som text.'); return false; }
@@ -198,28 +225,63 @@
       utterance.voice = voices.find(voice => voice.name === requestedName)
         || voices.find(voice => /^sv(-|$)/i.test(voice.lang))
         || null;
+      utterance.onstart = () => {
+        if (token !== generation) return;
+        if (speechStartTimer !== null) win.clearTimeout(speechStartTimer);
+        speechStartTimer = null;
+        if (typeof voiceOptions.onStart === 'function') voiceOptions.onStart();
+      };
       utterance.onend = () => {
         if (token !== generation) return;
         if (speechTimer !== null) win.clearTimeout(speechTimer);
+        if (speechStartTimer !== null) win.clearTimeout(speechStartTimer);
         speechTimer = null;
+        speechStartTimer = null;
+        currentUtterance = null;
         setState('IDLE');
       };
       utterance.onerror = () => {
         if (token !== generation) return;
         if (speechTimer !== null) win.clearTimeout(speechTimer);
+        if (speechStartTimer !== null) win.clearTimeout(speechStartTimer);
         speechTimer = null;
+        speechStartTimer = null;
+        currentUtterance = null;
         generation += 1;
         setState('IDLE', 'Uppläsningen avbröts. Dialogen finns kvar som text.');
       };
       setState('SPEAKING', 'Läser upp dialog.');
+      currentUtterance = utterance;
+      speechStartTimer = win.setTimeout(() => {
+        if (token !== generation || currentUtterance !== utterance) return;
+        speechStartTimer = null;
+        setState('IDLE', 'Uppläsningen startade inte. Tryck på Läs senaste repliken för att starta ljudet.');
+      }, 4000);
       speechTimer = win.setTimeout(() => {
         if (token !== generation) return;
         generation += 1;
         try { win.speechSynthesis.cancel(); } catch (_) { /* Best effort. */ }
+        currentUtterance = null;
+        if (speechStartTimer !== null) win.clearTimeout(speechStartTimer);
+        speechStartTimer = null;
         speechTimer = null;
         setState('IDLE', 'Uppläsningen avslutades. Dialogen finns kvar som text.');
       }, Math.max(30000, Math.min(180000, String(text).length * 180)));
-      try { win.speechSynthesis.speak(utterance); }
+      const enqueue = () => {
+        if (token !== generation) return;
+        try { win.speechSynthesis.speak(utterance); }
+        catch (_) {
+          currentUtterance = null;
+          cancelSpeech();
+          setState('IDLE', 'Talsyntesen kunde inte startas. Dialogen finns kvar som text.');
+        }
+      };
+      try {
+        // Give WebKit one event-loop turn to finish cancel() before replacing
+        // speech that was actively playing. Normal replies enqueue immediately.
+        if (hadQueuedUtterance) win.setTimeout(enqueue, 100);
+        else enqueue();
+      }
       catch (_) { cancelSpeech(); setState('IDLE', 'Talsyntesen kunde inte startas. Dialogen finns kvar som text.'); return false; }
       return true;
     }
@@ -230,7 +292,7 @@
     function getSettings() { return {...settings}; }
     function getVoices() { return availableVoices(); }
     function supportsRecognition() { return Boolean(win.SpeechRecognition || win.webkitSpeechRecognition); }
-    return {startListening, stopListening, speak, cancelSpeech, stopAll, update, getState, getSettings, getVoices, supportsRecognition};
+    return {startListening, stopListening, speak, cancelSpeech, stopAll, activateFromUserGesture, update, getState, getSettings, getVoices, supportsRecognition};
   }
 
   root.GameVoice = {createVoiceController, DEFAULT_SETTINGS, parseVoiceCommand, loadSettings, saveSettings, characterVoiceProfile};