diff --git a/examples/web_client.html b/examples/web_client.html index 5eb24dc..0d9b6f7 100644 --- a/examples/web_client.html +++ b/examples/web_client.html @@ -396,6 +396,8 @@ let playbackSources = []; let interimUserEl = null; let interimAiEl = null; + let interimUserText = ""; + let interimAiText = ""; const targetSampleRate = 16000; @@ -437,6 +439,8 @@ if (el) el.remove(); if (isAi) interimAiEl = null; else interimUserEl = null; + if (isAi) interimAiText = ""; + else interimUserText = ""; return; } if (!el) { @@ -450,6 +454,17 @@ chatHistory.scrollTop = chatHistory.scrollHeight; } + function stopPlayback() { + discardAudio = true; + playbackTime = audioCtx ? audioCtx.currentTime : 0; + playbackSources.forEach((s) => { + try { + s.stop(); + } catch (err) {} + }); + playbackSources = []; + } + function setStatus(connected, detail) { statusDot.classList.toggle("on", connected); statusText.textContent = connected ? "Connected" : "Disconnected"; @@ -581,7 +596,8 @@ setInterim("You", ""); addChat("You", event.text); } else if (event.text) { - setInterim("You", event.text); + interimUserText += event.text; + setInterim("You", interimUserText); } } if (type === "llmResponse") { @@ -589,33 +605,21 @@ setInterim("AI", ""); addChat("AI", event.text); } else if (event.text) { - setInterim("AI", event.text); + interimAiText += event.text; + setInterim("AI", interimAiText); } } if (type === "trackStart") { + // New bot audio: stop any previous playback to avoid overlap + stopPlayback(); discardAudio = false; - playbackTime = audioCtx ? audioCtx.currentTime : 0; } if (type === "speaking") { // User started speaking: clear any in-flight audio to avoid overlap - discardAudio = true; - playbackTime = audioCtx ? audioCtx.currentTime : 0; - playbackSources.forEach((s) => { - try { - s.stop(); - } catch (err) {} - }); - playbackSources = []; + stopPlayback(); } if (type === "interrupt") { - discardAudio = true; - playbackTime = audioCtx ? audioCtx.currentTime : 0; - playbackSources.forEach((s) => { - try { - s.stop(); - } catch (err) {} - }); - playbackSources = []; + stopPlayback(); } }