/** * Client-side Text-to-Speech Application * Uses Microsoft Edge TTS service to generate speech * Supports English (Connor Neural) voice for now */ import { serve } from 'https://esm.town/v/g/serveUtils'; import { Hono } from 'npm:hono'; import { MsEdgeTTS, OUTPUT_FORMAT } from 'npm:msedge-tts'; import escapeXML from 'npm:xml-escape'; function html() { /* Text to Speech

Text to Speech

*/ } function css() { /* body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh; margin: 0; background-color: #121212; color: #e0e0e0; } .container { background-color: #1e1e1e; padding: 2rem; border-radius: 8px; width: 100%; max-width: 500px; position: relative; border: 1px solid #2a2a2a; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%); } h1 { font-size: 1rem; color: #888; text-align: center; margin-bottom: 1.5rem; font-weight: 300; } textarea { width: 100%; box-sizing: border-box; margin-bottom: 1rem; padding: 0.3rem 0.5rem; resize: vertical; background-color: #2a2a2a; border: 1px solid #3a3a3a; color: #e0e0e0; min-height: 200px; font-size: 1rem; line-height: 1.5; border-radius: 4px; outline: none; transition: background 0.1s, color 0.5s ease-out; } textarea.scraping { color: transparent; background: linear-gradient(to bottom right, #4361ee88, #7209b788, #4cc9f088, #00a89688), #2a2a2a; background-size: 400% 400%; background-repeat: no-repeat; background-position: 100% 100%; animation: bgscroll 3s linear alternate-reverse infinite; } @keyframes bgscroll { 0% { background-position: 0% 0% }; 100% { background-position: 100% 100% } } .controls { width: 100%; display: flex; flex-direction: row; gap: 0.5rem; margin-bottom: 1rem; } select, button { background-color: #2a2a2a; color: #e0e0e0; border: 1px solid #3a3a3a; padding: 0.5rem; border-radius: 4px; min-width: 5rem; } select { flex: 2; -webkit-appearance: none; } button { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; } #paste { margin-bottom: 0.5rem; float: right; } button:hover { background-color: #3a3a3a; } #submitBtn { transition: background 0.1s; } #submitBtn.generating, #submitBtn.generating:hover { background: linear-gradient(to right, #004b23 20%, #007200, #004b23 80%), #2a2a2a; background-size: 200% 100%; background-position: 100% 0%; animation: bgload 1s ease-in-out alternate-reverse infinite; } @keyframes bgload { 0% { background-position: 0% 0% }; 100% { background-position: 100% 0% } } .audio-controls { display: flex; flex-direction: column; gap: 0.5rem; } audio, #downloadLink { width: 100%; background-color: #2a2a2a; color: #e0e0e0; } #downloadLink { display: block; box-sizing: border-box; text-align: center; padding: 0.75rem; text-decoration: none; background-color: #0072ff; color: white; border-radius: 4px; margin-top: 0.5rem; transition: background-color 0.2s; } #downloadLink:hover { background-color: #00c6ff; } audio { margin-top: 0.5rem; } @media (max-width:640px) { .container { box-sizing: border-box; width: 100%; height: 100vh; height: 100dvh; overflow-y: scroll; padding: 2rem 1rem; margin: 0; } textarea { height: calc(100vh - 25rem); height: calc(100svh - 25rem); } .controls { flex-direction: column; } } */ } function js() { /* const ttsForm = document.getElementById('ttsForm'); const textInput = document.getElementById('textInput'); const languageSelect = document.getElementById('languageSelect'); const voiceSelect = document.getElementById('voiceSelect'); const pasteBtn = document.getElementById('pasteBtn'); const submitBtn = document.getElementById('submitBtn'); const audioPlayer = document.getElementById('audioPlayer'); const downloadLink = document.getElementById('downloadLink'); fetch( 'https://gist.githubusercontent.com/autowert66/02c70e0678e6fdd12da4910191640e1d/raw/msedge-tts-voices.json', { cache: 'force-cache' } ).then(async (res) => { const { languages, voices } = await res.json(); const voicesByLanguage = { }; for(const voice of voices) { const lang = voice.match(/^[^\-]+-[^\-]+/); voicesByLanguage[lang] ||= []; voicesByLanguage[lang].push(voice); } const languageOptions = Object.entries(languages).map(([value, name]) => ({ name, value })); languageSelect.replaceChildren(...selectNodes(languageOptions)); languageSelect.addEventListener('change', (ev) => { const language = languageSelect.value; const voices = voicesByLanguage[language]; const voiceOptions = { Female: [], Male: [] }; for(const voice of voices) { const value = voice.split(' ')[0]; const [, _lang, id, info] = voice.match(/^([^\-]+-[^\-]+)-(.+) $(.+)$/); const name = id.replace(/([a-z])([A-Z0-9])/g, '$1 $2'); voiceOptions[info] ||= []; voiceOptions[info].push({ name, value }); } voiceSelect.replaceChildren(...selectNodes(voiceOptions)); }); languageSelect.value = navigator.language; languageSelect.dispatchEvent(new Event('change')); }); async function onPaste() { const text = textInput.value.trim(); const isUrl = text.startsWith('http') && /^https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)$/s.test(text); if(!isUrl) return; pasteBtn.disabled = true; textInput.disabled = true; textInput.classList.add('scraping'); try { const url = 'https://markdown.download/?url=' + encodeURIComponent(text); const res = await fetch(url, { headers: { Accept: 'text/markdown' } }); const markdown = await res.text(); const plain = markdown .replace(/(?<=\]$).+?(?=$)|!\[[^]]*\]$[^)]*$|(?#]+/gm, '') .replace(/\[(.+?)\]/g, '$1') .replace(/\nhttp\S+?$/, '').trim(); textInput.value = plain; } finally { pasteBtn.disabled = false; textInput.disabled = false; textInput.classList.remove('scraping'); } } textInput.addEventListener('paste', () => setTimeout(onPaste, 1)); pasteBtn.addEventListener('click', async (ev) => { ev.preventDefault(); const text = await navigator.clipboard.readText(); textInput.value = text; onPaste(); }); ttsForm.addEventListener('submit', async (ev) => { ev.preventDefault(); const text = textInput.value; const language = languageSelect.value; const voice = voiceSelect.value; submitBtn.disabled = true; submitBtn.classList.add('generating'); try { const response = await fetch('/generate-speech', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text, language, voice }) }); if (!response.ok) { throw new Error('Speech generation failed'); } const audioBlob = await response.blob(); const audioUrl = URL.createObjectURL(audioBlob); audioPlayer.src = audioUrl; audioPlayer.style.display = 'block'; audioPlayer.play(); downloadLink.href = audioUrl; downloadLink.download = 'speech.webm'; downloadLink.style.display = 'block'; downloadLink.textContent = 'Download Audio'; } catch (error) { console.error('Error:', error); alert('Failed to generate speech'); } submitBtn.disabled = false; submitBtn.classList.remove('generating'); }); function selectNodes(data) { if (Array.isArray(data)) { return data.map(({ name, value }) => { const option = document.createElement('option'); option.textContent = name; option.value = value; return option; }); } else if (typeof data === 'object') { return Object.entries(data).reduce((groups, [groupName, options]) => { const group = document.createElement('optgroup'); group.label = groupName; group.append(...selectNodes(options)); groups.push(group); return groups; }, []); } return []; }; */ } const app = new Hono(); // Serve static files app.get('/', serve(html, 'text/html')); app.get('/styles.css', serve(css, 'text/css')); app.get('/main.js', serve(js, 'text/javascript')); // Speech generation endpoint app.post('/generate-speech', async (c) => { const { text, language, voice } = await c.req.json(); const tts = new MsEdgeTTS(); await tts.setMetadata(voice, OUTPUT_FORMAT.WEBM_24KHZ_16BIT_MONO_OPUS); const { audioStream } = tts.toStream(escapeXML(text)); return new Response(audioStream, { headers: { 'Content-Type': 'audio/webm; codecs=opus', 'Content-Disposition': 'attachment; filename=speech.webm', }, }); }); export default app.fetch;

textToSpeechApp