From 061a04f1fe33545ab68cd2d73a9dbf9dd6ea9888 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Tue, 1 Jul 2025 12:17:27 -0400
Subject: [PATCH] Improve: TTS buttons auto-play with proper state transitions
 (processing -> pause -> play)

---
 demo.html | 53 +++++++++++++++++++++++++++++++++++++++++++++--------
 src/ui.js |  3 +++
 2 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/demo.html b/demo.html
index f2632ca..7c86fc0 100644
--- a/demo.html
+++ b/demo.html
@@ -381,27 +381,64 @@ await readPageWithHermes();</code></pre>
             const text = document.getElementById('custom-tts-text').value.trim();
             const voice = document.getElementById('voice-select').value;
             const resultDiv = document.getElementById('custom-tts-result');
+            const button = event.target;
             
             if (!text) {
                 alert('Please enter some text first!');
                 return;
             }
             
+            button.textContent = 'Processing...';
+            button.disabled = true;
             resultDiv.innerHTML = '<em>Generating speech...</em>';
             
             try {
                 const result = await speakText(text, voice, 1.0);
-                resultDiv.innerHTML = `
-                    <div style="margin: 10px 0;">
-                        <button onclick="this.parentElement.previousElementSibling.play()" style="margin: 2px;">▶️ Play</button>
-                        <button onclick="this.parentElement.previousElementSibling.pause()" style="margin: 2px;">⏸️ Pause</button>
-                        <button onclick="downloadCustomAudio()" style="margin: 2px;">💾 Download</button>
-                    </div>
-                `;
-                resultDiv.insertBefore(result.audio, resultDiv.firstChild);
+                
+                // Create play/pause button
+                const playPauseBtn = document.createElement('button');
+                playPauseBtn.textContent = '⏸️ Pause';
+                playPauseBtn.style.margin = '2px';
+                
+                const downloadBtn = document.createElement('button');
+                downloadBtn.textContent = '💾 Download';
+                downloadBtn.style.margin = '2px';
+                downloadBtn.onclick = () => downloadCustomAudio();
+                
+                const controls = document.createElement('div');
+                controls.style.margin = '10px 0';
+                controls.appendChild(playPauseBtn);
+                controls.appendChild(downloadBtn);
+                
+                resultDiv.innerHTML = '';
+                resultDiv.appendChild(controls);
+                
+                // Auto-play the audio
+                result.audio.play();
+                
+                // Handle play/pause button
+                playPauseBtn.onclick = () => {
+                    if (result.audio.paused) {
+                        result.audio.play();
+                        playPauseBtn.textContent = '⏸️ Pause';
+                    } else {
+                        result.audio.pause();
+                        playPauseBtn.textContent = '▶️ Play';
+                    }
+                };
+                
+                // Handle audio end
+                result.audio.onended = () => {
+                    playPauseBtn.textContent = '▶️ Play';
+                };
+                
                 window.customAudioBlob = result.blob;
+                button.textContent = 'Generate Speech';
+                button.disabled = false;
             } catch (error) {
                 resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
+                button.textContent = 'Generate Speech';
+                button.disabled = false;
             }
         }
         
diff --git a/src/ui.js b/src/ui.js
index b552ee4..9528c5c 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -1405,6 +1405,9 @@ export function openTTSModal() {
       ttsBlob = result.blob;
       playButton.textContent = 'Pause Text';
       playButton.disabled = false;
+      
+      // Auto-play the audio
+      ttsAudio.play();
 
       // Add download button if not exists
       let downloadButton = article.querySelector('.download-btn');