Update app.py

app.py

@@ -18,8 +18,9 @@ def toggle_audio(file):
 
     # 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"),
+        file if playing_states[file] else None,
+        "⏹️" if playing_states[file] else "▶️",  # Change button icon
+        "play-btn playing" if playing_states[file] else "play-btn",
     )
 
 # Custom CSS for styling
@@ -118,14 +119,14 @@ with gr.Blocks(css=custom_css) as demo:
         for voice in voices:
             with gr.Column(elem_classes="voice-box"):
                 # Audio Component (Hidden, Dynamic Source)
-                audio = gr.Audio(None, autoplay=True, elem_id=voice["name"], visible=False)
+                audio = gr.Audio(visible=False)
                 # Play Button
-                btn = gr.Button("▶", elem_classes="play-btn")
+                btn = gr.Button("▶️", elem_classes="play-btn")
                 # Voice Details
                 info = gr.Markdown(f"<div class='voice-info'><b>{voice['name']}</b><br><span>{voice['gender']} | {voice['country']}</span></div>")
                 
                 # Play/Pause Click Event
-                btn.click(fn=toggle_audio, inputs=[], outputs=[audio, btn], _js="() => {}")
+                btn.click(fn=toggle_audio, inputs=[gr.State(voice["file"])], outputs=[audio, btn, btn])
 
 # Launch App
 demo.launch()