engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add TTS play buttons for voice demos (aria, atlas)

Browse source
This commit is contained in:
russell@unturf.com 2026-01-28 07:59:12 -05:00
parent df040d4f70
commit e0630221e4
1 changed files with 107 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

110
public/text-to-speech.html
View file

@ -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