fix: improve audio playback interruption and response persistence

- Remove TTS timeout to prevent premature playback cancellation
- Save assistant responses to history before waiting for TTS completion
- Stop audio playback when sending message or starting recording
- Properly reject current audio promise when stopping playback
- Ensure partial responses are saved even if stream is aborted
```
This commit is contained in:
Mohamed Boudra
2025-10-20 00:18:41 +02:00
parent 07dae1c520
commit 65c6f81605
4 changed files with 52 additions and 25 deletions
+9
View File
@@ -248,6 +248,10 @@ function App() {
const handleSendMessage = () => {
if (!userInput.trim() || !ws.isConnected) return;
// Stop any currently playing audio and clear the queue
audioPlayerRef.current.stop();
setIsPlayingAudio(false);
// Send message to server
ws.sendUserMessage(userInput);
@@ -292,6 +296,11 @@ function App() {
console.log(`[App] Sent audio: ${audioBlob.size} bytes, format: ${format}`);
} else {
console.log('[App] Starting recording...');
// Stop any currently playing audio when starting to record
audioPlayerRef.current.stop();
setIsPlayingAudio(false);
await recorder.start();
setIsRecording(true);
}
@@ -16,6 +16,7 @@ export function createAudioPlayer(): AudioPlayer {
let playing = false;
let queue: QueuedAudio[] = [];
let isProcessingQueue = false;
let currentReject: ((error: Error) => void) | null = null;
async function play(audioData: Blob): Promise<number> {
return new Promise((resolve, reject) => {
@@ -51,6 +52,9 @@ export function createAudioPlayer(): AudioPlayer {
async function playAudio(audioData: Blob): Promise<number> {
return new Promise((resolve, reject) => {
// Store reject handler so stop() can properly cancel current playback
currentReject = reject;
try {
// Create blob URL
const audioUrl = URL.createObjectURL(audioData);
@@ -71,6 +75,7 @@ export function createAudioPlayer(): AudioPlayer {
);
playing = false;
currentAudio = null;
currentReject = null;
// Clean up blob URL
URL.revokeObjectURL(audioUrl);
@@ -82,6 +87,7 @@ export function createAudioPlayer(): AudioPlayer {
console.error("[AudioPlayer] Playback error:", error);
playing = false;
currentAudio = null;
currentReject = null;
// Clean up blob URL
URL.revokeObjectURL(audioUrl);
@@ -94,6 +100,7 @@ export function createAudioPlayer(): AudioPlayer {
console.error("[AudioPlayer] Failed to start playback:", error);
playing = false;
currentAudio = null;
currentReject = null;
URL.revokeObjectURL(audioUrl);
reject(error);
});
@@ -101,19 +108,29 @@ export function createAudioPlayer(): AudioPlayer {
console.error("[AudioPlayer] Error creating audio element:", error);
playing = false;
currentAudio = null;
currentReject = null;
reject(error);
}
});
}
function stop(): void {
// Stop and reject currently playing audio
if (currentAudio) {
currentAudio.pause();
currentAudio.currentTime = 0;
// Remove src to fully stop the audio
currentAudio.src = "";
currentAudio = null;
}
playing = false;
// Reject the current playing promise if it exists
if (currentReject) {
currentReject(new Error("Playback stopped"));
currentReject = null;
}
// Reject all pending promises in the queue
while (queue.length > 0) {
const item = queue.shift()!;