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

Improve: TTS buttons auto-play with proper state transitions (processing -> pause -> play)

Browse source
This commit is contained in:
Russell Ballestrini 2025-07-01 12:17:27 -04:00
parent 340241c886
commit 061a04f1fe
2 changed files with 48 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

53
demo.html
View file

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

3
src/ui.js
View file

@ -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');