From a999b23a1794dfb489671c08890ca2210c64eebc Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Mon, 22 Dec 2025 14:58:31 -0600
Subject: [PATCH] fix: clear cached audio when voice selection changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The preview button was caching audio but not invalidating the cache
when the user selected a different voice, causing the same audio to
play regardless of which voice was selected.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/components/VoicePreviewButton.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/VoicePreviewButton.tsx b/frontend/src/components/VoicePreviewButton.tsx
index 21aa6b0..7399154 100644
--- a/frontend/src/components/VoicePreviewButton.tsx
+++ b/frontend/src/components/VoicePreviewButton.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { api } from '../lib/api';
 
 interface VoicePreviewButtonProps {
@@ -14,6 +14,22 @@ export function VoicePreviewButton({ voiceName, language, disabled }: VoicePrevi
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const audioUrlRef = useRef<string | null>(null);
 
+  // Clear cached audio when voice or language changes
+  useEffect(() => {
+    // Stop any playing audio
+    if (audioRef.current) {
+      audioRef.current.pause();
+      audioRef.current = null;
+    }
+    // Revoke old URL
+    if (audioUrlRef.current) {
+      URL.revokeObjectURL(audioUrlRef.current);
+      audioUrlRef.current = null;
+    }
+    setIsPlaying(false);
+    setError(null);
+  }, [voiceName, language]);
+
   const handlePreview = async () => {
     setError(null);