From 1c8d429f816a1973e9b238c07853eed111817071 Mon Sep 17 00:00:00 2001 From: Ein Anderssono Date: Thu, 15 Oct 2026 23:58:34 +0200 Subject: [PATCH] Show an inline speech retry control --- README.md | 2 +- index.html | 33 +++++++++++++++++++++++++++++++-- scripts/check-frontend.sh | 2 ++ tests/voice.test.cjs | 6 ++++++ voice.js | 8 ++++++++ 5 files changed, 48 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 04cc9c2..f7cb5ee 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ 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. +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**; if a game reply does not start, a **Läs senaste repliken** button appears in the dialogue, with the same action also available in voice settings. 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. diff --git a/index.html b/index.html index d6eec82..7106953 100644 --- a/index.html +++ b/index.html @@ -89,6 +89,7 @@ let pendingDialogue = null; let latestAssistantText = ''; let latestAssistantVoice = {role: 'narrator', voiceIdentity: 'neutral'}; + let speechRecoveryElement = null; const voiceSettingsKey = 'ai-spel.voice-settings.v2'; let voiceSettings = window.GameVoice.loadSettings(localStorage, voiceSettingsKey, 'ai-spel.voice-settings.v1'); let voiceController; @@ -117,7 +118,7 @@ latestAssistantText = content; latestAssistantVoice = options.voice || {role: 'narrator', voiceIdentity: 'neutral'}; if (options.speak !== false && location.pathname !== '/admin') { - voiceController?.speak(content, latestAssistantVoice); + voiceController?.speak(content, {...latestAssistantVoice, onStart: clearSpeechRecovery}); } } return line; @@ -156,6 +157,33 @@ const authVoiceStatus = document.querySelector('#auth-voice-status'); if (authVoiceStatus && !auth.hidden && message) authVoiceStatus.textContent = message; } + function clearSpeechRecovery() { + speechRecoveryElement?.remove(); + speechRecoveryElement = null; + const status = document.querySelector('#voice-status'); + if (status?.textContent.startsWith('Uppläsningen startade inte')) setVoiceStatus('Läser upp dialog.'); + } + function showSpeechRecovery(message) { + clearSpeechRecovery(); + const item = document.createElement('li'); + item.dataset.role = 'voice-controls'; + item.setAttribute('aria-label', 'Uppläsning kunde inte starta'); + const explanation = document.createElement('p'); + explanation.textContent = message; + const retry = document.createElement('button'); + retry.type = 'button'; + retry.textContent = 'Läs senaste repliken'; + retry.addEventListener('click', () => { + voiceController.activateFromUserGesture(); + if (voiceController.speak(latestAssistantText, {...latestAssistantVoice, onStart: clearSpeechRecovery})) { + clearSpeechRecovery(); + } + }); + item.append(explanation, retry); + transcript.append(item); + item.scrollIntoView({block: 'end'}); + speechRecoveryElement = item; + } function refreshMicrophone() { const button = document.querySelector('#microphone'); if (button) button.disabled = play.hidden || messageField.disabled || submitBusy; @@ -191,6 +219,7 @@ microphone.textContent = listening ? 'Avsluta mikrofon' : 'Starta mikrofon'; refreshMicrophone(); if (message) setVoiceStatus(message); + if (/Uppläsningen startade inte/.test(message)) showSpeechRecovery(message); playVoiceSignal(state === 'IDLE' && /Mikrofonen är avstängd/.test(message) ? 'STOPPED' : state); }, onTranscript(text) { @@ -238,7 +267,7 @@ signalLabel.append(signals, document.createTextNode(' Ljudsignal vid röstinmatning')); fieldset.append(signalLabel); item.append(fieldset); const speakLatest = () => { - if (!voiceController.speak(latestAssistantText, latestAssistantVoice)) setVoiceStatus('Talsyntes stöds inte i den här webbläsaren. Dialogen finns kvar som text.'); + if (!voiceController.speak(latestAssistantText, {...latestAssistantVoice, onStart: clearSpeechRecovery})) setVoiceStatus('Talsyntes stöds inte i den här webbläsaren. Dialogen finns kvar som text.'); }; addVoiceButton(item, 'Läs senaste repliken', speakLatest); addVoiceButton(item, 'Upprepa', speakLatest); diff --git a/scripts/check-frontend.sh b/scripts/check-frontend.sh index b8a8730..660d3fb 100755 --- a/scripts/check-frontend.sh +++ b/scripts/check-frontend.sh @@ -14,6 +14,8 @@ 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 'function showSpeechRecovery' index.html +grep -q "retry.textContent = 'Läs senaste repliken'" 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 diff --git a/tests/voice.test.cjs b/tests/voice.test.cjs index 87ff517..2d1d370 100644 --- a/tests/voice.test.cjs +++ b/tests/voice.test.cjs @@ -155,8 +155,14 @@ test('replacing active speech waits one event-loop turn after WebKit cancel', () test('speech start timeout tells the player how to recover when mobile playback is blocked', () => { const h = makeHarness(); h.controller.speak('En replik'); + const cancelledBeforeTimeout = h.synthesis.cancelled; h.runTimer(4000); assert.match(h.states.at(-1).message, /Tryck på Läs senaste repliken/); + assert.equal(h.synthesis.cancelled, cancelledBeforeTimeout + 1); + const cancelledBeforeRetry = h.synthesis.cancelled; + h.controller.speak('Manuell återläsning'); + assert.equal(h.synthesis.spoken.at(-1).text, 'Manuell återläsning'); + assert.equal(h.synthesis.cancelled, cancelledBeforeRetry); }); test('character voice identity gives stable distinct masculine, feminine, and neutral timbres', () => { diff --git a/voice.js b/voice.js index d7f4938..4f5915a 100644 --- a/voice.js +++ b/voice.js @@ -255,6 +255,14 @@ speechStartTimer = win.setTimeout(() => { if (token !== generation || currentUtterance !== utterance) return; speechStartTimer = null; + generation += 1; + currentUtterance = null; + if (speechTimer !== null) win.clearTimeout(speechTimer); + speechTimer = null; + // Drop a blocked native utterance now. A player retry can then call + // speak() directly from its button gesture instead of following a + // same-turn cancel() that older WebKit versions may discard. + try { win.speechSynthesis.cancel(); } catch (_) { /* Best effort. */ } setState('IDLE', 'Uppläsningen startade inte. Tryck på Läs senaste repliken för att starta ljudet.'); }, 4000); speechTimer = win.setTimeout(() => {