From e0630221e488e1008b47be318c49406695a55e93 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Wed, 28 Jan 2026 07:59:12 -0500
Subject: [PATCH] Add TTS play buttons for voice demos (aria, atlas)

---
 public/text-to-speech.html | 110 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 107 insertions(+), 3 deletions(-)
diff --git a/public/text-to-speech.html b/public/text-to-speech.html
index 16eff80..7ae2de0 100644
--- a/public/text-to-speech.html
+++ b/public/text-to-speech.html
@@ -33,6 +33,100 @@
     </script>
 
     <script src="https://uncloseai.com/uncloseai.js" type="module"></script>
+
+    <style>
+        .tts-demo {
+            margin-bottom: 1.5rem;
+        }
+        .tts-demo pre {
+            margin-bottom: 0.5rem;
+        }
+        .tts-play-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 1rem;
+            font-size: 0.9rem;
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        .tts-play-btn:disabled {
+            opacity: 0.6;
+            cursor: wait;
+        }
+        .tts-play-btn .play-icon {
+            font-size: 0.8rem;
+        }
+        .tts-play-btn.playing .play-icon {
+            animation: pulse 1s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+    </style>
+
+    <script>
+        let currentAudio = null;
+
+        async function playTTS(text, voice, button) {
+            // Stop any currently playing audio
+            if (currentAudio) {
+                currentAudio.pause();
+                currentAudio = null;
+                document.querySelectorAll('.tts-play-btn').forEach(btn => {
+                    btn.classList.remove('playing');
+                    btn.disabled = false;
+                    btn.querySelector('.play-icon').textContent = '\u25B6';
+                });
+            }
+
+            button.disabled = true;
+            button.classList.add('playing');
+            button.querySelector('.play-icon').textContent = '\u23F3';
+
+            try {
+                const response = await fetch('https://speech.ai.unturf.com/v1/audio/speech', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ input: text, voice: voice })
+                });
+
+                if (!response.ok) {
+                    throw new Error('TTS request failed: ' + response.status);
+                }
+
+                const blob = await response.blob();
+                const url = URL.createObjectURL(blob);
+                currentAudio = new Audio(url);
+
+                currentAudio.onended = () => {
+                    button.classList.remove('playing');
+                    button.disabled = false;
+                    button.querySelector('.play-icon').textContent = '\u25B6';
+                    URL.revokeObjectURL(url);
+                    currentAudio = null;
+                };
+
+                currentAudio.onerror = () => {
+                    button.classList.remove('playing');
+                    button.disabled = false;
+                    button.querySelector('.play-icon').textContent = '\u25B6';
+                    URL.revokeObjectURL(url);
+                    currentAudio = null;
+                };
+
+                button.querySelector('.play-icon').textContent = '\u25A0';
+                await currentAudio.play();
+            } catch (err) {
+                console.error('TTS error:', err);
+                button.classList.remove('playing');
+                button.disabled = false;
+                button.querySelector('.play-icon').textContent = '\u25B6';
+                alert('Failed to play audio: ' + err.message);
+            }
+        }
+    </script>
 </head>
 
 <body>
@@ -110,21 +204,31 @@
 
         <p>Our public endpoint runs the <a href="/tts/voice-cloning.html"><strong>Voice Cloning engine</strong></a> &mdash; 42+ distinct human voices cloned from the LibriSpeech public domain corpus, speaking 10 languages natively. First audio arrives in under 100 milliseconds.</p>
 
-        <pre><code class="bash"># Female voice
+        <div class="tts-demo">
+            <pre><code class="bash"># Female voice
 curl https://speech.ai.unturf.com/v1/audio/speech \
   -H "Content-Type: application/json" \
   -d '{
     "input": "We rescue abandoned text-to-speech models and give them a new home. No API keys, no tracking, just open source voices for everyone.",
     "voice": "aria"
-  }' > aria.mp3
+  }' > aria.mp3</code></pre>
+            <button class="tts-play-btn" onclick="playTTS('We rescue abandoned text-to-speech models and give them a new home. No API keys, no tracking, just open source voices for everyone.', 'aria', this)">
+                <span class="play-icon">&#9658;</span> Play aria
+            </button>
+        </div>
 
-# Male voice
+        <div class="tts-demo">
+            <pre><code class="bash"># Male voice
 curl https://speech.ai.unturf.com/v1/audio/speech \
   -H "Content-Type: application/json" \
   -d '{
     "input": "Like raccoons digging through digital dumpsters, we find the best open source TTS models that big companies left behind, and we make them accessible to everyone.",
     "voice": "atlas"
   }' > atlas.mp3</code></pre>
+            <button class="tts-play-btn" onclick="playTTS('Like raccoons digging through digital dumpsters, we find the best open source TTS models that big companies left behind, and we make them accessible to everyone.', 'atlas', this)">
+                <span class="play-icon">&#9658;</span> Play atlas
+            </button>
+        </div>
 
         <pre><code class="python">from openai import OpenAI
 
