Update app.py

app.py

@@ -2,23 +2,27 @@ import gradio as gr
 
 # Define available voices
 voices = [
-    {"name": "Jessica", "gender": "Female", "country": "US", "file": "jessica.mp3"},
-    {"name": "Michael", "gender": "Male", "country": "UK", "file": "michael.mp3"},
-    {"name": "Sophia", "gender": "Female", "country": "Canada", "file": "sophia.mp3"},
-    {"name": "David", "gender": "Male", "country": "Australia", "file": "david.mp3"},
-    {"name": "Emma", "gender": "Female", "country": "Germany", "file": "emma.mp3"},
-    {"name": "Lucas", "gender": "Male", "country": "France", "file": "lucas.mp3"},
-    {"name": "Liam", "gender": "Male", "country": "India", "file": "liam.mp3"},
-    {"name": "Olivia", "gender": "Female", "country": "Brazil", "file": "olivia.mp3"},
-    {"name": "Noah", "gender": "Male", "country": "Japan", "file": "noah.mp3"},
-    {"name": "Ava", "gender": "Female", "country": "South Korea", "file": "ava.mp3"},
+    {"name": "Jessica", "gender": "Female", "country": "US", "file": "voices/jessica.mp3"},
+    {"name": "Michael", "gender": "Male", "country": "UK", "file": "voices/michael.mp3"},
+    {"name": "Sophia", "gender": "Female", "country": "Canada", "file": "voices/sophia.mp3"},
+    {"name": "David", "gender": "Male", "country": "Australia", "file": "voices/david.mp3"},
 ]
 
-# Function to return audio file path
-def play_audio(file):
-    return f"voices/{file}"
+# Store playing state
+playing_states = {voice["file"]: False for voice in voices}
+
+# Function to toggle audio
+def toggle_audio(file):
+    global playing_states
+    playing_states[file] = not playing_states[file]  # Toggle state
+
+    # If playing, return file path; otherwise, return None to stop audio
+    return (
+        gr.update(value=file if playing_states[file] else None),
+        gr.update(elem_classes="play-btn playing" if playing_states[file] else "play-btn"),
+    )
 
-# Custom CSS for better design and responsiveness
+# Custom CSS for styling
 custom_css = """
 h2 {
     text-align: center;
@@ -106,15 +110,6 @@ body {
 }
 """
 
-# State to track playing voices
-playing_states = {voice["file"]: False for voice in voices}
-
-# Function to toggle play/pause
-def toggle_audio(file):
-    global playing_states
-    playing_states[file] = not playing_states[file]
-    return (f"voices/{file}" if playing_states[file] else None), gr.update(elem_classes="play-btn playing" if playing_states[file] else "play-btn")
-
 # Create Gradio UI
 with gr.Blocks(css=custom_css) as demo:
     gr.Markdown("<h2>🎤 Human-Like Voices (Pro Plan)</h2>")
@@ -122,14 +117,15 @@ with gr.Blocks(css=custom_css) as demo:
     with gr.Column(elem_classes="voice-container"):
         for voice in voices:
             with gr.Column(elem_classes="voice-box"):
-                # Hidden Audio Component
-                audio = gr.Audio(None, autoplay=False, elem_id=voice["name"], visible=False)
-                # Round Play Button
+                # Audio Component (Hidden, Dynamic Source)
+                audio = gr.Audio(None, autoplay=True, elem_id=voice["name"], visible=False)
+                # Play Button
                 btn = gr.Button("▶", elem_classes="play-btn")
-                # Voice Details (Name in Bold, Other Info Below)
+                # Voice Details
                 info = gr.Markdown(f"<div class='voice-info'><b>{voice['name']}</b><br><span>{voice['gender']} | {voice['country']}</span></div>")
                 
-                btn.click(fn=toggle_audio, inputs=[], outputs=[audio, btn])
+                # Play/Pause Click Event
+                btn.click(fn=toggle_audio, inputs=[], outputs=[audio, btn], _js="() => {}")
 
 # Launch App
 demo.launch()