Add browser voice input and speech output

.gitea/workflows/publish.yaml

@@ -25,6 +25,7 @@ jobs:
         shell: bash
         run: |
           set -euo pipefail
+          node --version
           python3 scripts/bump-version.py --check
           scripts/check-frontend.sh
 

Dockerfile

@@ -3,6 +3,7 @@ FROM nginxinc/nginx-unprivileged:1.27-alpine
 ARG FRONTEND_VERSION
 RUN test -n "$FRONTEND_VERSION"
 COPY index.html /usr/share/nginx/html/index.html
+COPY voice.js /usr/share/nginx/html/voice.js
 COPY nginx/default.conf /etc/nginx/conf.d/default.conf
 USER root
 RUN sed -i "s/__FRONTEND_VERSION__/${FRONTEND_VERSION}/g" /usr/share/nginx/html/index.html

README.md

@@ -10,6 +10,10 @@ The separate `/admin` route provides an authenticated, read-only operations view
 
 The game is text- and dialogue-based and uses no images. Place descriptions include sound, smell, air/temperature, touch/surface, and spatial-orientation cues. Visible details may also be described in words, but are never required to understand the scene or play. The transcript is screen-reader announced, and Enter submits the input while Shift+Enter inserts a newline; no separate send button is required.
 
+Voice input and output are optional browser features. The microphone button beside the text field uses Web Speech API when available and sends only its final Swedish transcript through the same submission path as typed text. Writing `röstinställningar` or saying `röstkommando alternativ` opens the temporary controls in the dialogue. The player can choose `Spelets röst`, `Skärmläsare`, or `Endast text`, select available Swedish speech voices and rate, and enable auto-read and short audio cues. The default mode is `Skärmläsare`; auto-read is off. These preferences are stored in browser `localStorage`. If speech APIs are unavailable or permission is denied, text play remains available. No audio is uploaded or stored by this feature.
+
+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.
+
 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

@@ -18,6 +18,10 @@
     #dialogue li[data-role="user"] { font-weight: 650; }
     #dialogue li[data-role="assistant"] { padding-inline-start: .75rem; border-inline-start: .2rem solid currentColor; }
     #message { width: 100%; min-height: 3.5rem; box-sizing: border-box; }
+    #message-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
+    #voice-status { min-height: 1.5em; }
+    #dialogue li[data-role="voice-controls"] { border: 1px solid currentColor; border-radius: .35rem; padding: .75rem; }
+    #dialogue li[data-role="voice-controls"] fieldset { display: grid; gap: .5rem; margin-block: .5rem; }
     #admin-content { display: grid; gap: 1rem; }
     #admin-content section, #admin-content article { border: 1px solid currentColor; border-radius: .35rem; padding: .75rem; }
     #admin-content pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow: auto; }
@@ -45,8 +49,10 @@
       <form id="message-form">
         <label for="message" id="message-label">Skriv ett meddelande</label>
         <textarea id="message" name="message" maxlength="4000" aria-describedby="message-help" autocomplete="off"></textarea>
+        <div id="message-tools"><button type="button" id="microphone" aria-pressed="false" aria-describedby="voice-status">Starta mikrofon</button></div>
         <span id="message-help" class="sr-only">Tryck Enter för att skicka. Tryck Skift och Enter för ny rad.</span>
       </form>
+      <p id="voice-status" role="status" aria-live="polite"></p>
     </section>
     <section id="admin-view" aria-labelledby="admin-heading" hidden>
       <h1 id="admin-heading">Administration</h1>
@@ -62,6 +68,7 @@
     </section>
   </main>
   <footer id="version-footer">Frontend <span id="frontend-version">__FRONTEND_VERSION__</span> · API <span id="api-version">hämtar version…</span></footer>
+  <script src="/voice.js"></script>
   <script>
     const auth = document.querySelector('#auth');
     const play = document.querySelector('#play');
@@ -76,6 +83,11 @@
     let gameState = null;
     let submitBusy = false;
     let pendingDialogue = null;
+    let latestAssistantText = '';
+    const voiceSettingsKey = 'ai-spel.voice-settings.v1';
+    let voiceSettings = window.GameVoice.loadSettings(localStorage, voiceSettingsKey);
+    let voiceController;
+    let audioContext;
     let adminOffset = 0;
     const adminPageSize = 50;
 
@@ -85,17 +97,143 @@
       if (!response.ok) throw new Error(body?.error || `HTTP ${response.status}`);
       return body;
     }
-    function appendLine(role, content) {
+    function appendLine(role, content, options = {}) {
       const line = document.createElement('li');
       line.dataset.role = role;
-      line.textContent = `${role === 'user' ? 'Du' : 'Berättelsen'}: ${content}`;
+      line.textContent = `${options.speaker || (role === 'user' ? 'Du' : 'Berättelsen')}: ${content}`;
       transcript.append(line);
       line.scrollIntoView({block: 'end'});
+      if (role === 'assistant') {
+        latestAssistantText = content;
+        if (options.speak !== false && !content.trim().endsWith('…') && !content.trim().endsWith('...')
+          && voiceSettings.mode === 'game-voice' && voiceSettings.autoSpeak && !play.hidden) {
+          voiceController?.speak(content, options.voice || {});
+        }
+      }
       return line;
     }
+    function setVoiceStatus(message = '') { document.querySelector('#voice-status').textContent = message; }
+    function refreshMicrophone() {
+      const button = document.querySelector('#microphone');
+      if (button) button.disabled = play.hidden || messageField.disabled || submitBusy;
+    }
+    function persistVoiceSettings() {
+      if (!window.GameVoice.saveSettings(localStorage, voiceSettingsKey, voiceSettings)) {
+        setVoiceStatus('Röstinställningen kunde inte sparas i den här webbläsaren.');
+      }
+      voiceController?.update(voiceSettings);
+      if (voiceSettings.mode !== 'game-voice') voiceController?.stopAll();
+      else if (!voiceSettings.autoSpeak) voiceController?.cancelSpeech();
+      transcript.setAttribute('aria-live', voiceSettings.mode === 'game-voice' ? 'off' : 'polite');
+    }
+    function playVoiceSignal(state) {
+      if (!voiceSettings.soundSignals || !['LISTENING', 'PROCESSING', 'ERROR', 'STOPPED'].includes(state)) return;
+      try {
+        const Audio = window.AudioContext || window.webkitAudioContext;
+        if (!Audio) return;
+        audioContext ||= new Audio();
+        if (audioContext.state === 'suspended') audioContext.resume();
+        const oscillator = audioContext.createOscillator(); const gain = audioContext.createGain();
+        oscillator.frequency.value = state === 'ERROR' ? 260 : state === 'PROCESSING' ? 820 : state === 'STOPPED' ? 420 : 560;
+        gain.gain.value = 0.025; oscillator.connect(gain); gain.connect(audioContext.destination);
+        oscillator.start(); oscillator.stop(audioContext.currentTime + 0.055);
+      } catch (_) { /* Audio cues are optional and never block the game. */ }
+    }
+    voiceController = window.GameVoice.createVoiceController({
+      settings: voiceSettings,
+      onState(state, message) {
+        const microphone = document.querySelector('#microphone');
+        const listening = state === 'LISTENING';
+        microphone.setAttribute('aria-pressed', String(listening));
+        microphone.textContent = listening ? 'Avsluta mikrofon' : 'Starta mikrofon';
+        refreshMicrophone();
+        if (message) setVoiceStatus(message);
+        playVoiceSignal(state === 'IDLE' && /Mikrofonen är avstängd/.test(message) ? 'STOPPED' : state);
+      },
+      onTranscript(text) {
+        return submitMessage(text, 'voice');
+      },
+    });
+    persistVoiceSettings();
+
+    function addVoiceButton(parent, label, handler) {
+      const button = document.createElement('button'); button.type = 'button'; button.textContent = label;
+      button.addEventListener('click', handler); parent.append(button); return button;
+    }
+    function appendVoiceSettings() {
+      const item = document.createElement('li'); item.dataset.role = 'voice-controls';
+      item.setAttribute('aria-label', 'Röstinställningar och uppläsning');
+      const heading = document.createElement('strong'); heading.textContent = 'Röstinställningar'; item.append(heading);
+      const fieldset = document.createElement('fieldset');
+      const legend = document.createElement('legend'); legend.textContent = 'Välj hur dialogen ska läsas upp'; fieldset.append(legend);
+      const modeLabel = document.createElement('label'); modeLabel.textContent = 'Läge';
+      const mode = document.createElement('select');
+      [['screen-reader', 'Skärmläsare'], ['game-voice', 'Spelets röst'], ['text-only', 'Endast text']].forEach(([value, label]) => {
+        const option = document.createElement('option'); option.value = value; option.textContent = label; mode.append(option);
+      });
+      mode.value = voiceSettings.mode; modeLabel.append(mode); fieldset.append(modeLabel);
+      const autoLabel = document.createElement('label'); const auto = document.createElement('input');
+      auto.type = 'checkbox'; auto.checked = voiceSettings.autoSpeak;
+      autoLabel.append(auto, document.createTextNode(' Läs nya repliker automatiskt')); fieldset.append(autoLabel);
+      const speedLabel = document.createElement('label'); speedLabel.textContent = `Talhastighet: ${Number(voiceSettings.rate).toFixed(1)}`;
+      const speed = document.createElement('input'); speed.type = 'range'; speed.min = '0.5'; speed.max = '2'; speed.step = '0.1'; speed.value = String(voiceSettings.rate);
+      speed.setAttribute('aria-label', 'Talhastighet'); speed.addEventListener('input', () => { speedLabel.firstChild.textContent = `Talhastighet: ${Number(speed.value).toFixed(1)}`; });
+      speedLabel.append(speed); fieldset.append(speedLabel);
+      const voiceLabel = document.createElement('label'); voiceLabel.textContent = 'Svensk röst';
+      const voice = document.createElement('select'); voice.setAttribute('aria-label', 'Svensk röst');
+      const defaultVoice = document.createElement('option'); defaultVoice.value = ''; defaultVoice.textContent = 'Systemets standardröst'; voice.append(defaultVoice);
+      function refreshVoices() {
+        const selected = voiceSettings.voiceName;
+        voice.replaceChildren(defaultVoice.cloneNode(true));
+        voiceController.getVoices().filter(entry => /^sv(-|$)/i.test(entry.lang)).forEach(entry => {
+          const option = document.createElement('option'); option.value = entry.name; option.textContent = `${entry.name} (${entry.lang})`; voice.append(option);
+        });
+        voice.value = selected;
+      }
+      refreshVoices();
+      window.speechSynthesis?.addEventListener?.('voiceschanged', refreshVoices);
+      voice.value = voiceSettings.voiceName; voiceLabel.append(voice); fieldset.append(voiceLabel);
+      const signalLabel = document.createElement('label'); const signals = document.createElement('input');
+      signals.type = 'checkbox'; signals.checked = voiceSettings.soundSignals;
+      signalLabel.append(signals, document.createTextNode(' Ljudsignal vid röstinmatning')); fieldset.append(signalLabel);
+      item.append(fieldset);
+      const speakLatest = () => {
+        if (!voiceController.speak(latestAssistantText)) setVoiceStatus('Talsyntes stöds inte här eller är avstängd. Dialogen finns kvar som text.');
+      };
+      addVoiceButton(item, 'Läs senaste repliken', speakLatest);
+      addVoiceButton(item, 'Upprepa', speakLatest);
+      addVoiceButton(item, 'Avbryt uppläsning', () => voiceController.cancelSpeech());
+      mode.addEventListener('change', () => { voiceSettings.mode = mode.value; persistVoiceSettings(); });
+      auto.addEventListener('change', () => { voiceSettings.autoSpeak = auto.checked; persistVoiceSettings(); });
+      speed.addEventListener('change', () => { voiceSettings.rate = Number(speed.value); persistVoiceSettings(); });
+      voice.addEventListener('change', () => { voiceSettings.voiceName = voice.value; persistVoiceSettings(); });
+      signals.addEventListener('change', () => { voiceSettings.soundSignals = signals.checked; persistVoiceSettings(); });
+      addVoiceButton(item, 'Stäng röstinställningar', () => item.remove());
+      transcript.append(item); item.scrollIntoView({block: 'end'}); mode.focus();
+    }
+    function handleVoiceCommand(message, source) {
+      const parsed = window.GameVoice.parseVoiceCommand(message, {requirePrefix: source === 'voice'});
+      if (!parsed) return false;
+      if (parsed.command === 'settings') appendVoiceSettings();
+      else if (parsed.command === 'repeat') {
+        if (!voiceController.speak(latestAssistantText)) setVoiceStatus('Talsyntes stöds inte här eller är avstängd. Dialogen finns kvar som text.');
+      } else if (parsed.command === 'stop') {
+        voiceController.cancelSpeech(); voiceController.stopListening(); setVoiceStatus('Röstinteraktionen är avbruten.');
+      } else if (parsed.command === 'help') {
+        appendLine('assistant', 'Skriv röstinställningar för röstlägen. I spelets röstläge kan du tala till mikrofonen eller skriva. Använd “röstkommando upprepa” för att höra senaste repliken igen.');
+      } else setVoiceStatus('Okänt röstkommando. Skriv röstinställningar för alternativen.');
+      return true;
+    }
+    document.querySelector('#microphone').addEventListener('click', () => {
+      if (voiceController.getState() === 'LISTENING') voiceController.stopListening();
+      else voiceController.startListening();
+    });
+    document.addEventListener('visibilitychange', () => { if (document.hidden) voiceController.stopAll(); });
+    window.addEventListener('pagehide', () => voiceController.stopAll());
     function setStage(next) {
       stage = next;
       messageField.disabled = false;
+      refreshMicrophone();
       messageField.value = '';
       messageLabel.textContent = next === 'biography'
         ? 'Berätta fritt om personen du vill spela'
@@ -119,6 +257,7 @@
       adminView.hidden = true;
       play.hidden = false;
       document.querySelector('#version-footer').hidden = true;
+      refreshMicrophone();
       messageField.focus();
     }
     function showAdmin() {
@@ -260,7 +399,8 @@
     async function loadSavedDialogue() {
       const lines = await request('/api/dialogue');
       transcript.replaceChildren();
-      for (const line of lines) appendLine(line.role === 'user' ? 'user' : 'assistant', line.content);
+      latestAssistantText = '';
+      for (const line of lines) appendLine(line.role === 'user' ? 'user' : 'assistant', line.content, {speak: false});
       if (lines.length === 0 && gameState?.world) {
         const place = gameState.world.location;
         const senses = place.senses || {};
@@ -376,7 +516,10 @@
         gameState.world.version = result.world_version;
         gameState.world.world_time = result.world_time;
         pendingDialogue = null;
-        appendLine('assistant', result.reply);
+        const speakingNpc = result.intent === 'speak' ? gameState.world.npc : null;
+        appendLine('assistant', result.reply, speakingNpc
+          ? {speaker: speakingNpc.name, voice: {characterId: speakingNpc.id}}
+          : {speaker: 'Berättelsen'});
       } catch (error) {
         messageField.value = message;
         appendLine('assistant', `Meddelandet kunde inte behandlas: ${error.message}. Texten ligger kvar i inmatningen; skicka igen för att försöka på nytt.`);
@@ -398,12 +541,15 @@
         window.alert(`Kunde inte logga in: ${error.message}`);
       }
     });
-    document.querySelector('#message-form').addEventListener('submit', async (event) => {
+    async function submitMessage(input, source = 'text') {
-      event.preventDefault();
       if (submitBusy || messageField.disabled) return;
-      const message = messageField.value.trim();
+      const message = String(input || '').trim();
       if (!message) return;
+      if (handleVoiceCommand(message, source)) { messageField.value = ''; return; }
       submitBusy = true;
+      refreshMicrophone();
+      voiceController.stopListening();
+      voiceController.cancelSpeech();
       messageField.value = '';
       try {
         if (stage === 'biography') await handleBiography(message);
@@ -412,8 +558,13 @@
         appendLine('assistant', `Det gick inte att genomföra begäran: ${error.message}`);
       } finally {
         submitBusy = false;
+        refreshMicrophone();
         if (!play.hidden && !messageField.disabled) messageField.focus();
       }
+    }
+    document.querySelector('#message-form').addEventListener('submit', async (event) => {
+      event.preventDefault();
+      await submitMessage(messageField.value);
     });
     document.querySelectorAll('[data-admin-view]').forEach(button => button.addEventListener('click', async () => {
       adminContent.setAttribute('aria-busy', 'true');

scripts/check-frontend.sh

@@ -8,6 +8,15 @@ grep -q "request('/version')" index.html
 grep -Fq "credentials: 'same-origin'" index.html
 grep -q 'id="dialogue" aria-label="Dialoghistorik" role="log" aria-live="polite"' index.html
 grep -q 'id="message" name="message"' index.html
+grep -q 'id="microphone" aria-pressed="false"' index.html
+grep -q 'id="voice-status" role="status" aria-live="polite"' index.html
+grep -q "window.GameVoice.createVoiceController" index.html
+grep -q 'COPY voice.js /usr/share/nginx/html/voice.js' Dockerfile
+grep -q "SpeechRecognition || win.webkitSpeechRecognition" voice.js
+grep -q "submitMessage(text)" index.html
+grep -q "'screen-reader', 'Skärmläsare'" index.html
+grep -q "'game-voice', 'Spelets röst'" index.html
+grep -q "'text-only', 'Endast text'" index.html
 grep -q "event.key === 'Enter' && !event.shiftKey" index.html
 grep -q "request('/api/character/draft'" index.html
 grep -q "request('/api/world/draft'" index.html
@@ -26,9 +35,11 @@ if grep -Eq 'id="(new-character|world-setup|shop|buy-offer|balance|inventory|pla
   echo 'The active player UI must not contain permanent data panels, forms, or action buttons.' >&2
   exit 1
 fi
-if sed -n '/<section id="play"/,/^    <\/section>/p' index.html | grep -q '<button'; then
+if sed -n '/<section id="play"/,/^    <\/section>/p' index.html | grep '<button' | grep -v 'id="microphone"' >/dev/null; then
-  echo 'The game input must not require a separate send or action button.' >&2
+  echo 'Only the microphone control may appear beside the game text input.' >&2
   exit 1
 fi
 
+node --test tests/voice.test.cjs
+
 echo 'Frontend source checks passed.'

tests/voice.test.cjs

@@ -0,0 +1,166 @@
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const test = require('node:test');
+const vm = require('node:vm');
+
+const source = fs.readFileSync(path.join(__dirname, '..', 'voice.js'), 'utf8');
+
+function makeHarness({supported = true, tts = true, onTranscript = () => Promise.resolve()} = {}) {
+  const recognitions = [];
+  const utterances = [];
+  const states = [];
+  const timers = new Map();
+  let timerId = 0;
+  class Recognition {
+    constructor() { recognitions.push(this); }
+    start() { this.started = true; }
+    stop() { this.stopped = true; }
+    abort() { this.aborted = true; }
+  }
+  class Utterance {
+    constructor(text) { this.text = text; utterances.push(this); }
+  }
+  const synthesis = tts ? {
+    spoken: [], cancelled: 0,
+    getVoices: () => [{name: 'Svensk', lang: 'sv-SE'}],
+    speak(utterance) { this.spoken.push(utterance); },
+    cancel() { this.cancelled += 1; },
+  } : undefined;
+  const window = {
+    setTimeout(callback) { const id = ++timerId; timers.set(id, callback); return id; },
+    clearTimeout(id) { timers.delete(id); },
+    speechSynthesis: synthesis,
+    SpeechSynthesisUtterance: tts ? Utterance : undefined,
+    SpeechRecognition: supported ? Recognition : undefined,
+  };
+  vm.runInNewContext(source, {window, globalThis: window, Promise, String, Math, Object});
+  const controller = window.GameVoice.createVoiceController({
+    window,
+    onState: (state, message) => states.push({state, message}),
+    onTranscript,
+  });
+  return {controller, recognitions, utterances, synthesis, states, timers};
+}
+
+test('recognition is single-shot Swedish and sends only final transcript once', async () => {
+  const received = [];
+  const h = makeHarness({onTranscript: text => { received.push(text); }});
+  assert.equal(h.controller.startListening(), true);
+  const recognition = h.recognitions[0];
+  assert.equal(recognition.lang, 'sv-SE');
+  assert.equal(recognition.continuous, false);
+  assert.equal(recognition.interimResults, false);
+  recognition.onresult({resultIndex: 0, results: [{isFinal: false, 0: {transcript: 'delvis'}}]});
+  recognition.onresult({resultIndex: 0, results: [{isFinal: true, 0: {transcript: '  Hej världen  '}}]});
+  recognition.onresult({resultIndex: 0, results: [{isFinal: true, 0: {transcript: 'dubblett'}}]});
+  await Promise.resolve(); await Promise.resolve();
+  assert.deepEqual(received, ['Hej världen']);
+  assert.equal(h.controller.getState(), 'IDLE');
+});
+
+test('second microphone activation stops the active recognition session', () => {
+  const h = makeHarness();
+  h.controller.startListening();
+  h.controller.startListening();
+  assert.equal(h.recognitions.length, 1);
+  assert.equal(h.recognitions[0].aborted, true);
+  assert.equal(h.controller.getState(), 'IDLE');
+});
+
+test('unsupported recognition stays recoverable and leaves text input available', () => {
+  const h = makeHarness({supported: false});
+  assert.equal(h.controller.startListening(), false);
+  assert.equal(h.controller.getState(), 'IDLE');
+  assert.match(h.states.at(-1).message, /skriva/);
+});
+
+test('permission errors reset state and a later session can start', () => {
+  const h = makeHarness();
+  h.controller.startListening();
+  h.recognitions[0].onerror({error: 'not-allowed'});
+  assert.equal(h.controller.getState(), 'IDLE');
+  assert.match(h.states.at(-1).message, /behörighet nekades/);
+  assert.equal(h.controller.startListening(), true);
+  assert.equal(h.recognitions.length, 2);
+});
+
+test('late recognition results after cancellation are ignored', () => {
+  let delivered = 0;
+  const h = makeHarness({onTranscript: () => { delivered += 1; }});
+  h.controller.startListening();
+  const old = h.recognitions[0];
+  h.controller.stopListening();
+  old.onresult({resultIndex: 0, results: [{isFinal: true, 0: {transcript: 'för sent'}}]});
+  assert.equal(delivered, 0);
+});
+
+test('recognition watchdog closes a session that never ends and permits retry', () => {
+  const h = makeHarness();
+  h.controller.startListening();
+  const watchdog = [...h.timers.values()][0];
+  watchdog();
+  assert.equal(h.controller.getState(), 'IDLE');
+  assert.match(h.states.at(-1).message, /en minut/);
+  assert.equal(h.controller.startListening(), true);
+  assert.equal(h.recognitions.length, 2);
+});
+
+test('TTS selects Swedish fallback, applies rate, and cancellation invalidates callbacks', () => {
+  const h = makeHarness();
+  h.controller.update({mode: 'game-voice', rate: 1.4});
+  assert.equal(h.controller.speak('Hej.'), true);
+  const first = h.utterances[0];
+  assert.equal(first.lang, 'sv-SE');
+  assert.equal(first.rate, 1.4);
+  assert.equal(first.voice.name, 'Svensk');
+  h.controller.cancelSpeech();
+  first.onend();
+  assert.equal(h.controller.getState(), 'IDLE');
+});
+
+test('TTS and microphone are mutually exclusive', () => {
+  const h = makeHarness();
+  h.controller.update({mode: 'game-voice'});
+  h.controller.startListening();
+  h.controller.speak('Svar');
+  assert.equal(h.recognitions[0].aborted, true);
+  assert.equal(h.controller.getState(), 'SPEAKING');
+});
+
+test('speech is disabled in screen-reader mode and gracefully degrades without synthesis', () => {
+  const screenReader = makeHarness();
+  assert.equal(screenReader.controller.speak('dialog'), false);
+  const noTts = makeHarness({tts: false});
+  noTts.controller.update({mode: 'game-voice'});
+  assert.equal(noTts.controller.speak('dialog'), false);
+});
+
+test('system commands require an explicit prefix; ordinary dialogue words are untouched', () => {
+  const global = {};
+  vm.runInNewContext(source, {window: global, globalThis: global, Promise, String, Math, Object});
+  assert.equal(global.GameVoice.parseVoiceCommand('upprepa'), null);
+  assert.equal(global.GameVoice.parseVoiceCommand('hjälp'), null);
+  assert.equal(global.GameVoice.parseVoiceCommand('röstkommando upprepa.' ).command, 'repeat');
+  assert.equal(global.GameVoice.parseVoiceCommand('röstkommando alternativ').command, 'settings');
+  assert.equal(global.GameVoice.parseVoiceCommand('röstinställningar').command, 'settings');
+  assert.equal(global.GameVoice.parseVoiceCommand('röstinställningar', {requirePrefix: true}), null);
+  assert.equal(global.GameVoice.parseVoiceCommand('röstkommando alternativ', {requirePrefix: true}).command, 'settings');
+});
+
+test('settings survive reload and invalid storage falls back to accessible defaults', () => {
+  const global = {};
+  vm.runInNewContext(source, {window: global, globalThis: global, Promise, String, Math, Object});
+  const values = new Map();
+  const storage = {getItem: key => values.get(key) || null, setItem: (key, value) => values.set(key, value)};
+  const requested = {...global.GameVoice.DEFAULT_SETTINGS, mode: 'game-voice', autoSpeak: true, rate: 1.5, voiceName: 'Svensk'};
+  assert.equal(global.GameVoice.saveSettings(storage, 'voice', requested), true);
+  const loaded = global.GameVoice.loadSettings(storage, 'voice');
+  assert.equal(loaded.mode, 'game-voice');
+  assert.equal(loaded.autoSpeak, true);
+  assert.equal(loaded.rate, 1.5);
+  assert.equal(loaded.voiceName, 'Svensk');
+  values.set('voice', '{trasig');
+  assert.equal(global.GameVoice.loadSettings(storage, 'voice').mode, 'screen-reader');
+  assert.equal(global.GameVoice.saveSettings({setItem() { throw new Error('blocked'); }}, 'voice', requested), false);
+});

voice.js

@@ -0,0 +1,208 @@
+/* Browser voice adapters. Kept independent of the game submission and API layer. */
+(function exposeVoice(root) {
+  const DEFAULT_SETTINGS = Object.freeze({
+    mode: 'screen-reader',
+    autoSpeak: false,
+    language: 'sv-SE',
+    rate: 1,
+    voiceName: '',
+    speakerProfiles: {},
+    autoStop: true,
+    soundSignals: true,
+  });
+
+  function parseVoiceCommand(text, options = {}) {
+    const value = String(text || '').trim();
+    if (/^röstinställningar[.!]?$/i.test(value)) return options.requirePrefix ? null : {command: 'settings'};
+    const match = value.match(/^röstkommando\s+(.+?)[.!]?$/i);
+    if (!match) return null;
+    const command = match[1].trim().replace(/[.!?]+$/, '').toLocaleLowerCase('sv-SE');
+    const aliases = {
+      upprepa: 'repeat', 'läs igen': 'repeat',
+      avbryt: 'stop', stopp: 'stop', paus: 'stop',
+      hjälp: 'help', alternativ: 'settings', inställningar: 'settings', röstinställningar: 'settings',
+    };
+    return {command: aliases[command] || 'unknown'};
+  }
+
+  function loadSettings(storage, key) {
+    try {
+      const stored = JSON.parse(storage.getItem(key) || '{}');
+      const settings = {...DEFAULT_SETTINGS, ...stored};
+      if (!['screen-reader', 'game-voice', 'text-only'].includes(settings.mode)) settings.mode = DEFAULT_SETTINGS.mode;
+      settings.rate = Math.min(2, Math.max(0.5, Number(settings.rate) || 1));
+      settings.voiceName = typeof settings.voiceName === 'string' ? settings.voiceName : '';
+      settings.speakerProfiles = settings.speakerProfiles && typeof settings.speakerProfiles === 'object' ? settings.speakerProfiles : {};
+      settings.autoSpeak = settings.autoSpeak === true;
+      settings.soundSignals = settings.soundSignals !== false;
+      return settings;
+    } catch (_) { return {...DEFAULT_SETTINGS}; }
+  }
+
+  function saveSettings(storage, key, settings) {
+    try { storage.setItem(key, JSON.stringify(settings)); return true; }
+    catch (_) { return false; }
+  }
+
+  function createVoiceController(options = {}) {
+    const win = options.window || root;
+    const onState = options.onState || (() => {});
+    const onTranscript = options.onTranscript || (() => {});
+    const settings = {...DEFAULT_SETTINGS, ...(options.settings || {})};
+    let state = 'IDLE';
+    let generation = 0;
+    let recognition = null;
+    let speechTimer = null;
+    let listeningTimer = null;
+
+    function setState(next, message = '') {
+      state = next;
+      onState(next, message);
+    }
+
+    function cancelSpeech() {
+      generation += 1;
+      if (speechTimer !== null) win.clearTimeout(speechTimer);
+      speechTimer = null;
+      try { win.speechSynthesis?.cancel(); } catch (_) { /* Best effort. */ }
+      if (!recognition) setState('IDLE');
+    }
+
+    function finishRecognition(token, message = '') {
+      if (token !== generation) return;
+      if (listeningTimer !== null) win.clearTimeout(listeningTimer);
+      listeningTimer = null;
+      recognition = null;
+      generation += 1;
+      if (message) setState('ERROR', message);
+      setState('IDLE', message);
+    }
+
+    function stopListening() {
+      if (!recognition) return;
+      const old = recognition;
+      recognition = null;
+      generation += 1;
+      if (listeningTimer !== null) win.clearTimeout(listeningTimer);
+      listeningTimer = null;
+      try { old.abort(); } catch (_) { try { old.stop(); } catch (_) { /* Already stopped. */ } }
+      setState('IDLE', 'Mikrofonen är avstängd.');
+    }
+
+    function startListening() {
+      if (recognition) { stopListening(); return true; }
+      const Recognition = win.SpeechRecognition || win.webkitSpeechRecognition;
+      if (!Recognition) {
+        setState('ERROR', 'Taligenkänning stöds inte här. Du kan fortfarande skriva.');
+        setState('IDLE', 'Taligenkänning stöds inte här. Du kan fortfarande skriva.');
+        return false;
+      }
+      cancelSpeech();
+      const token = ++generation;
+      let instance;
+      try { instance = new Recognition(); }
+      catch (_) { setState('IDLE', 'Mikrofonen kunde inte startas. Kontrollera behörigheten och försök igen.'); return false; }
+      recognition = instance;
+      instance.lang = settings.language || 'sv-SE';
+      instance.continuous = false;
+      instance.interimResults = false;
+      let delivered = false;
+      instance.onresult = event => {
+        if (token !== generation || delivered) return;
+        const result = event.results?.[event.resultIndex ?? 0];
+        if (!result?.isFinal) return;
+        const text = String(result[0]?.transcript || '').trim();
+        if (!text) { finishRecognition(token, 'Inget tal kunde identifieras. Försök igen eller skriv.'); return; }
+        delivered = true;
+        if (listeningTimer !== null) win.clearTimeout(listeningTimer);
+        listeningTimer = null;
+        setState('PROCESSING', 'Tal identifierat.');
+        Promise.resolve().then(() => onTranscript(text)).then(
+          () => finishRecognition(token),
+          () => finishRecognition(token, 'Meddelandet kunde inte skickas. Du kan försöka igen eller skriva.')
+        );
+      };
+      instance.onerror = event => {
+        if (token !== generation) return;
+        const messages = {
+          'not-allowed': 'Mikrofonbehörighet nekades. Tillåt mikrofonen i webbläsaren eller skriv i stället.',
+          'service-not-allowed': 'Taligenkänning är inte tillgänglig. Du kan skriva i stället.',
+          'audio-capture': 'Ingen mikrofon hittades. Anslut en mikrofon eller skriv i stället.',
+          'no-speech': 'Inget tal hördes. Tryck på mikrofonen och försök igen.',
+          network: 'Taligenkänningens nätverkstjänst svarar inte. Försök igen eller skriv.',
+          aborted: 'Taligenkänningen avbröts. Du kan starta den igen.',
+        };
+        finishRecognition(token, messages[event.error] || 'Taligenkänningen avslutades oväntat. Försök igen eller skriv.');
+      };
+      instance.onend = () => {
+        if (token !== generation || delivered || state === 'PROCESSING') return;
+        finishRecognition(token, 'Mikrofonen avslutades. Tryck för att försöka igen eller skriv.');
+      };
+      setState('LISTENING', 'Lyssnar. Tryck på mikrofonen igen för att avsluta.');
+      listeningTimer = win.setTimeout(() => {
+        if (token !== generation) return;
+        try { instance.abort(); } catch (_) { /* Recognition may already have stopped. */ }
+        finishRecognition(token, 'Mikrofonen stängdes efter en minut. Tryck för att försöka igen eller skriv.');
+      }, 60000);
+      try { instance.start(); }
+      catch (_) { finishRecognition(token, 'Mikrofonen kunde inte startas. Kontrollera behörigheten och försök igen.'); return false; }
+      return true;
+    }
+
+    function availableVoices() {
+      try { return win.speechSynthesis?.getVoices?.() || []; } catch (_) { return []; }
+    }
+
+    function speak(text, voiceOptions = {}) {
+      if (!text || settings.mode !== 'game-voice' || !win.speechSynthesis || !win.SpeechSynthesisUtterance) return false;
+      stopListening();
+      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; }
+      utterance.lang = settings.language || 'sv-SE';
+      const profile = voiceOptions.characterId ? settings.speakerProfiles?.[voiceOptions.characterId] || {} : {};
+      utterance.rate = Math.min(2, Math.max(0.5, Number(voiceOptions.rate ?? profile.rate ?? settings.rate) || 1));
+      utterance.pitch = Math.min(2, Math.max(0, Number(voiceOptions.pitch ?? profile.pitch ?? 1) || 1));
+      const requestedName = voiceOptions.voiceName || profile.voiceName || settings.voiceName;
+      const voices = availableVoices();
+      utterance.voice = voices.find(voice => voice.name === requestedName)
+        || voices.find(voice => /^sv(-|$)/i.test(voice.lang))
+        || null;
+      utterance.onend = () => {
+        if (token !== generation) return;
+        if (speechTimer !== null) win.clearTimeout(speechTimer);
+        speechTimer = null;
+        setState('IDLE');
+      };
+      utterance.onerror = () => {
+        if (token !== generation) return;
+        if (speechTimer !== null) win.clearTimeout(speechTimer);
+        speechTimer = null;
+        generation += 1;
+        setState('IDLE', 'Uppläsningen avbröts. Dialogen finns kvar som text.');
+      };
+      setState('SPEAKING', 'Läser upp dialog.');
+      speechTimer = win.setTimeout(() => {
+        if (token !== generation) return;
+        generation += 1;
+        try { win.speechSynthesis.cancel(); } catch (_) { /* Best effort. */ }
+        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); }
+      catch (_) { cancelSpeech(); setState('IDLE', 'Talsyntesen kunde inte startas. Dialogen finns kvar som text.'); return false; }
+      return true;
+    }
+
+    function update(patch) { Object.assign(settings, patch); return {...settings}; }
+    function stopAll() { stopListening(); cancelSpeech(); }
+    function getState() { return state; }
+    function getSettings() { return {...settings}; }
+    function getVoices() { return availableVoices(); }
+    return {startListening, stopListening, speak, cancelSpeech, stopAll, update, getState, getSettings, getVoices};
+  }
+
+  root.GameVoice = {createVoiceController, DEFAULT_SETTINGS, parseVoiceCommand, loadSettings, saveSettings};
+})(typeof window !== 'undefined' ? window : globalThis);