Text to Audio Player

Paste any text below to convert it to speech and play it with controls

\n \n

\n {!audioGenerated ? (\n

\n \n \n

\n );\n}",[],[154,172],{"_102":181,"_95":182,"_155":183,"_157":156,"_158":140,"_159":184,"_161":117,"_104":185,"_99":186,"_163":176,"_165":187,"_166":22,"_167":-5,"_168":188,"_98":189},"6d8a620a-23e0-11f0-9844-569c3dd06744","AudioPlayer.ts","f8315ece-23de-11f0-8668-569c3dd06744",26,["D",1745810726582],1,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\n\ninterface AudioPlayerProps {\n text: string;\n onReset: () => void;\n}\n\nexport function AudioPlayer({ text, onReset }: AudioPlayerProps) {\n const [isPlaying, setIsPlaying] = useState(false);\n const [isPaused, setIsPaused] = useState(false);\n const [currentTime, setCurrentTime] = useState(0);\n const [duration, setDuration] = useState(0);\n const [playbackRate, setPlaybackRate] = useState(1);\n const [error, setError] = useState(null);\n const [statusMessage, setStatusMessage] = useState(null);\n const [usingFallback, setUsingFallback] = useState(false);\n const [availableVoices, setAvailableVoices] = useState([\n 'Arista-PlayAI',\n 'Atlas-PlayAI',\n 'Basil-PlayAI',\n 'Briggs-PlayAI',\n 'Calum-PlayAI',\n 'Celeste-PlayAI',\n 'Cheyenne-PlayAI',\n 'Chip-PlayAI',\n 'Cillian-PlayAI',\n 'Deedee-PlayAI',\n 'Fritz-PlayAI',\n 'Gail-PlayAI',\n 'Indigo-PlayAI',\n 'Mamaw-PlayAI',\n 'Mason-PlayAI',\n 'Mikail-PlayAI',\n 'Mitch-PlayAI',\n 'Quinn-PlayAI',\n 'Thunder-PlayAI'\n ]);\n const [selectedVoice, setSelectedVoice] = useState(\"Cheyenne-PlayAI\");\n \n // Refs\n const audioRef = useRef(null);\n const speechSynthRef = useRef(null);\n const utteranceRef = useRef(null);\n const animationFrameRef = useRef(null);\n const startTimeRef = useRef(0);\n const pausedTimeRef = useRef(0);\n \n // Initialize on component mount\n useEffect(() => {\n if (typeof window !== 'undefined') {\n // Create an audio element for server-generated audio\n audioRef.current = new Audio();\n \n // Also initialize Web Speech API as fallback\n speechSynthRef.current = window.speechSynthesis;\n \n // Set up audio events\n if (audioRef.current) {\n const audio = audioRef.current;\n \n audio.onloadedmetadata = () => {\n if (audio.duration !== Infinity) {\n setDuration(audio.duration);\n } else {\n // Some browsers may return Infinity for dynamic audio\n // Estimate duration based on text length\n const words = text.split(/\\\\s+/).length;\n const estimatedDuration = (words / 150) * 60;\n setDuration(estimatedDuration);\n }\n };\n \n audio.ontimeupdate = () => {\n setCurrentTime(audio.currentTime);\n };\n \n audio.onended = () => {\n setIsPlaying(false);\n setCurrentTime(audio.duration);\n };\n \n audio.onerror = (event) => {\n setError(`Audio playback error: ${audio.error?.message || 'Unknown error'}`);\n setIsPlaying(false);\n };\n }\n \n // Clean up on unmount\n return () => {\n if (audioRef.current) {\n audioRef.current.pause();\n audioRef.current.src = '';\n }\n \n if (speechSynthRef.current && speechSynthRef.current.speaking) {\n speechSynthRef.current.cancel();\n }\n \n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }\n }, []);\n \n // Generate audio when component mounts or text changes\n useEffect(() => {\n generateAudio();\n }, [text, selectedVoice]);\n \n // Function to generate audio from text\n const generateAudio = async () => {\n setStatusMessage(\"Generating audio...\");\n setError(null);\n \n try {\n // Try server-side TTS first\n const response = await fetch('/text-to-speech', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n text: text,\n voice: selectedVoice\n })\n });\n \n // Check if we got audio or a fallback response\n const contentType = response.headers.get('Content-Type') || '';\n \n if (contentType.includes('audio/')) {\n // We got audio data from the server\n const audioBlob = await response.blob();\n const audioUrl = URL.createObjectURL(audioBlob);\n \n if (audioRef.current) {\n audioRef.current.src = audioUrl;\n audioRef.current.playbackRate = playbackRate;\n \n // Estimate duration until metadata is loaded\n const words = text.split(/\\\\s+/).length;\n const estimatedDuration = (words / 150) * 60;\n setDuration(estimatedDuration);\n \n setUsingFallback(false);\n setStatusMessage(null);\n }\n } else {\n // We got JSON response, likely error or fallback indicator\n const data = await response.json();\n \n if (data.fallback) {\n // Server signaled to use fallback\n console.log(\"Using Web Speech API fallback:\", data.message);\n setUsingFallback(true);\n initializeWebSpeechFallback();\n setStatusMessage(null);\n } else {\n throw new Error(data.error || \"Unknown server error\");\n }\n }\n } catch (err) {\n console.error(\"Error generating audio:\", err);\n setError(`Failed to generate audio: ${err.message}`);\n setUsingFallback(true);\n initializeWebSpeechFallback();\n setStatusMessage(null);\n }\n };\n \n // Initialize Web Speech API as fallback\n const initializeWebSpeechFallback = () => {\n if (!speechSynthRef.current) {\n setError(\"Your browser doesn't support text-to-speech functionality.\");\n return;\n }\n \n // Create utterance\n utteranceRef.current = new SpeechSynthesisUtterance(text);\n \n // Set default voice (usually first available voice)\n const voices = speechSynthRef.current.getVoices();\n if (voices.length > 0) {\n utteranceRef.current.voice = voices[0];\n }\n \n // Estimate duration based on text length (rough estimate)\n // Average reading speed is about 150 words per minute\n const words = text.split(/\\\\s+/).length;\n const estimatedDuration = (words / 150) * 60;\n setDuration(estimatedDuration);\n };\n \n // Select a random voice from the available voices\n const selectRandomVoice = () => {\n const randomIndex = Math.floor(Math.random() * availableVoices.length);\n setSelectedVoice(availableVoices[randomIndex]);\n };\n \n // Handle play/pause\n const togglePlayPause = () => {\n if (isPlaying) {\n // Pause audio\n if (!usingFallback && audioRef.current) {\n audioRef.current.pause();\n } else if (usingFallback && speechSynthRef.current) {\n speechSynthRef.current.pause();\n pausedTimeRef.current = Date.now() - startTimeRef.current;\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n animationFrameRef.current = null;\n }\n }\n \n setIsPlaying(false);\n setIsPaused(true);\n } else {\n // Play/resume audio\n if (!usingFallback && audioRef.current) {\n const playPromise = audioRef.current.play();\n \n if (playPromise !== undefined) {\n playPromise.catch(error => {\n console.error(\"Playback error:\", error);\n setError(`Playback error: ${error.message}`);\n });\n }\n } else if (usingFallback && speechSynthRef.current && utteranceRef.current) {\n if (isPaused) {\n // Resume speech\n speechSynthRef.current.resume();\n startTimeRef.current = Date.now() - pausedTimeRef.current;\n updateWebSpeechProgress();\n } else {\n // Start speech\n utteranceRef.current.rate = playbackRate;\n speechSynthRef.current.cancel(); // Cancel any existing speech\n speechSynthRef.current.speak(utteranceRef.current);\n pausedTimeRef.current = 0;\n startTimeRef.current = Date.now();\n updateWebSpeechProgress();\n }\n }\n \n setIsPlaying(true);\n setIsPaused(false);\n }\n };\n \n // Update progress bar for Web Speech API\n const updateWebSpeechProgress = () => {\n if (!isPlaying && !isPaused) {\n setCurrentTime(0);\n return;\n }\n \n const elapsed = (Date.now() - startTimeRef.current) / 1000;\n const scaledTime = elapsed * playbackRate;\n \n if (scaledTime <= duration) {\n setCurrentTime(scaledTime);\n animationFrameRef.current = requestAnimationFrame(updateWebSpeechProgress);\n } else {\n setCurrentTime(duration);\n }\n };\n \n // Handle seek\n const handleSeek = (e: React.ChangeEvent) => {\n const seekTime = parseFloat(e.target.value);\n setCurrentTime(seekTime);\n \n if (!usingFallback && audioRef.current) {\n // For HTML Audio, seeking is straightforward\n audioRef.current.currentTime = seekTime;\n } else if (usingFallback && speechSynthRef.current && utteranceRef.current && (isPlaying || isPaused)) {\n // Speech API doesn't support seeking directly, so we need to restart\n // the speech at an approximated position\n const wasPlaying = isPlaying;\n \n // Cancel current speech\n speechSynthRef.current.cancel();\n \n // Create new utterance with modified text (starting from approximate position)\n const words = text.split(/\\\\s+/);\n const wordsPerSecond = words.length / duration;\n const startWordIndex = Math.floor(seekTime * wordsPerSecond);\n const remainingText = words.slice(startWordIndex).join(' ');\n \n utteranceRef.current = new SpeechSynthesisUtterance(remainingText);\n utteranceRef.current.rate = playbackRate;\n \n // Update timing references\n pausedTimeRef.current = seekTime * 1000 / playbackRate;\n startTimeRef.current = Date.now() - pausedTimeRef.current;\n \n // If it was playing, resume speech\n if (wasPlaying) {\n speechSynthRef.current.speak(utteranceRef.current);\n updateWebSpeechProgress();\n } else {\n setIsPaused(true);\n }\n }\n };\n \n // Handle playback rate change\n const changePlaybackRate = () => {\n // Cycle through common playback rates: 0.5, 1, 1.5, 2\n const newRate = playbackRate >= 2 ? 0.5 : playbackRate + 0.5;\n setPlaybackRate(newRate);\n \n if (!usingFallback && audioRef.current) {\n // For HTML Audio, changing rate is straightforward\n audioRef.current.playbackRate = newRate;\n } else if (usingFallback && utteranceRef.current) {\n utteranceRef.current.rate = newRate;\n \n // If currently playing, we need to restart with new rate\n if (isPlaying && speechSynthRef.current) {\n const currentElapsed = (Date.now() - startTimeRef.current) / 1000;\n const currentPosition = currentElapsed * playbackRate;\n \n // Cancel current speech\n speechSynthRef.current.cancel();\n \n // Create new utterance with modified text (starting from approximate position)\n const words = text.split(/\\\\s+/);\n const wordsPerSecond = words.length / duration;\n const startWordIndex = Math.floor(currentPosition * wordsPerSecond);\n const remainingText = words.slice(startWordIndex).join(' ');\n \n utteranceRef.current = new SpeechSynthesisUtterance(remainingText);\n utteranceRef.current.rate = newRate;\n \n // Update timing references\n pausedTimeRef.current = currentPosition * 1000 / newRate;\n startTimeRef.current = Date.now() - pausedTimeRef.current;\n \n speechSynthRef.current.speak(utteranceRef.current);\n updateWebSpeechProgress();\n }\n }\n };\n \n // Skip forward/backward\n const skip = (seconds: number) => {\n const newTime = Math.max(0, Math.min(currentTime + seconds, duration));\n \n if (!usingFallback && audioRef.current) {\n // For HTML Audio, skipping is straightforward\n audioRef.current.currentTime = newTime;\n setCurrentTime(newTime);\n } else if (usingFallback) {\n // For Web Speech API, use the seek functionality\n const e = { target: { value: String(newTime) } } as React.ChangeEvent;\n handleSeek(e);\n }\n };\n \n // Format time to MM:SS\n const formatTime = (time: number): string => {\n const minutes = Math.floor(time / 60);\n const seconds = Math.floor(time % 60);\n return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n };\n \n return (\n

\n {error ? (\n

\n {error}\n

\n ) : (\n <>\n

\n Audio Playback\n {usingFallback && (Using Web Speech API)}\n

\n \n {statusMessage && (\n

\n {statusMessage}\n

\n )}\n \n {!usingFallback && (\n

\n Voice:\n \n \n

\n )}\n \n \n \n

\n {formatTime(currentTime)}\n {formatTime(duration)}\n

\n \n

\n \n \n \n \n \n \n \n \n \n

\n \n

\n Click and drag the progress bar to seek to a specific position\n

\n \n )}\n

\n );\n}",[],[154,182],[154],{"_102":192,"_95":193,"_155":194,"_157":-5,"_158":140,"_159":195,"_161":117,"_104":196,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":197,"_98":216},"36d886ba-23e0-11f0-9cd2-569c3dd06744","handlers","36d88796-23e0-11f0-9cd2-569c3dd06744",22,["D",1745810634820],[198,207],{"_102":199,"_95":200,"_155":201,"_157":194,"_158":140,"_159":202,"_161":117,"_104":203,"_99":32,"_163":176,"_165":204,"_166":22,"_167":-5,"_168":205,"_98":206},"484f5ac2-23e0-11f0-9dec-569c3dd06744","index.ts","484f5bbc-23e0-11f0-9dec-569c3dd06744",24,["D",1745810664122],"/**\n * Re-export handlers for convenience\n */\nexport { textToSpeechHandler } from './tts.ts';",[],[193,200],{"_102":208,"_95":209,"_155":210,"_157":194,"_158":140,"_159":211,"_161":117,"_104":212,"_99":32,"_163":176,"_165":213,"_166":22,"_167":-5,"_168":214,"_98":215},"40e68508-23e0-11f0-939c-569c3dd06744","tts.ts","40e685d0-23e0-11f0-939c-569c3dd06744",23,["D",1745810651691],"import { Context } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\n\n/**\n * Text-to-speech handler that uses the Groq API\n * Converts text to speech and returns audio data\n */\nexport const textToSpeechHandler = async (c: Context) => {\n console.log(\"🔊 Text-to-speech request received\");\n \n try {\n const body = await c.req.json();\n const { text, voice = \"Cheyenne-PlayAI\" } = body;\n \n console.log(`🔊 Processing TTS request: \"${text?.substring(0, 50)}...\" with voice: ${voice}`);\n \n if (!text) {\n console.error(\"❌ TTS error: No text provided\");\n return c.json({ error: \"No text provided\" }, 400);\n }\n\n // Get API key from environment variable\n const apiKey = Deno.env.get(\"GROQ_API_KEY\");\n \n // If no API key is available, return an error that will trigger the client-side fallback\n if (!apiKey) {\n console.warn(\"⚠️ TTS warning: No GROQ_API_KEY provided, the client will use fallback Web Speech API\");\n return c.json({ \n error: \"API key not configured\", \n fallback: true, \n message: \"Using browser's Web Speech API as fallback\"\n }, 200); // Still return 200 to enable fallback\n }\n\n // Call Groq Speech API\n console.log(\"🔊 Sending request to Groq Speech API\");\n const start = Date.now();\n const response = await fetch(\"https://api.groq.com/openai/v1/audio/speech\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${apiKey}`\n },\n body: JSON.stringify({\n model: \"playai-tts\",\n voice: voice,\n input: text,\n response_format: \"wav\"\n })\n });\n const elapsed = Date.now() - start;\n console.log(`🔊 Groq Speech API response received in ${elapsed}ms, status: ${response.status}`);\n\n if (!response.ok) {\n let errorMessage = \"Failed to generate speech\";\n try {\n const errorData = await response.json();\n errorMessage = errorData.error?.message || JSON.stringify(errorData);\n console.error(\"❌ TTS API error:\", errorData);\n } catch (e) {\n // If response is not JSON\n errorMessage = `Server error: ${response.status} ${response.statusText}`;\n console.error(\"❌ TTS API non-JSON error:\", errorMessage);\n }\n \n return c.json({ \n error: errorMessage, \n fallback: true, \n message: \"Using browser's Web Speech API as fallback\"\n }, 200); // Still return 200 to enable fallback\n }\n\n // Get the audio data\n const audioBuffer = await response.arrayBuffer();\n console.log(`✅ TTS successful. Audio size: ${audioBuffer.byteLength} bytes`);\n \n // Return the audio data as a response with proper headers\n return new Response(audioBuffer, {\n headers: {\n \"Content-Type\": \"audio/wav\",\n \"Content-Length\": audioBuffer.byteLength.toString()\n }\n });\n } catch (error) {\n console.error(\"❌ Text-to-speech error:\", error);\n return c.json({\n error: error.message || \"Error generating speech\",\n fallback: true,\n message: \"Using browser's Web Speech API as fallback\",\n details: error.stack\n }, 200); // Still return 200 to enable fallback\n }\n};",[],[193,209],[193],{"_102":218,"_95":219,"_155":220,"_157":-5,"_158":140,"_159":221,"_161":117,"_104":222,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":223,"_98":251},"0a625428-23de-11f0-a378-569c3dd06744","ui","0a625518-23de-11f0-a378-569c3dd06744",2,["D",1745809701234],[224,233,242],{"_102":225,"_95":226,"_155":227,"_157":220,"_158":140,"_159":228,"_161":117,"_104":229,"_99":32,"_163":176,"_165":230,"_166":22,"_167":-5,"_168":231,"_98":232},"120a15f2-23df-11f0-992f-569c3dd06744","html.ts","120a16ba-23df-11f0-992f-569c3dd06744",17,["D",1745810143575],"import { getStyles } from './styles.ts';\nimport { getManifest } from './manifest.ts';\n\n/**\n * Generates the HTML content for the app\n * @param importUrl - The import URL of the module\n * @returns The HTML content\n */\nexport function getHtml(importUrl: string): string {\n return `\n\n\n\n \n \n Text to Audio PWA Player\n \n \n \n \n \n \n \n \n \n \n ')}\">\n \n \n \n\n\n

\n \n \n \n \n \n \n \n \n \n\n\n `;\n}",[],[219,226],{"_102":234,"_95":235,"_155":236,"_157":220,"_158":140,"_159":237,"_161":117,"_104":238,"_99":32,"_163":176,"_165":239,"_166":22,"_167":-5,"_168":240,"_98":241},"e302f9f8-23df-11f0-99b0-569c3dd06744","manifest.ts","e302fac0-23df-11f0-99b0-569c3dd06744",21,["D",1745810494170],"/**\n * Provides the web app manifest for PWA functionality\n * @returns The web app manifest object\n */\nexport function getManifest() {\n return {\n \"name\": \"Text to Audio Player\",\n \"short_name\": \"Audio Player\",\n \"description\": \"A simple PWA that converts pasted text to speech with playback controls\",\n \"start_url\": \"/\",\n \"display\": \"standalone\",\n \"background_color\": \"#f9fafb\",\n \"theme_color\": \"#3b82f6\",\n \"icons\": [\n {\n \"src\": \"https://maxm-imggenurl.web.val.run/minimal-audio-player-headphones-icon-blue\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\",\n \"purpose\": \"any maskable\"\n },\n {\n \"src\": \"https://maxm-imggenurl.web.val.run/minimal-audio-player-headphones-icon-blue-large\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\",\n \"purpose\": \"any maskable\"\n }\n ]\n };\n}",[],[219,235],{"_102":243,"_95":244,"_155":245,"_157":220,"_158":140,"_159":246,"_161":117,"_104":247,"_99":32,"_163":176,"_165":248,"_166":22,"_167":-5,"_168":249,"_98":250},"db2fee02-23df-11f0-b8c5-569c3dd06744","styles.ts","db2fefd8-23df-11f0-b8c5-569c3dd06744",19,["D",1745810481044],"/**\n * Provides the CSS styles for the application\n * @returns The CSS styles as a string\n */\nexport function getStyles(): string {\n return `\n :root {\n --primary-color: #3b82f6;\n --primary-dark: #2563eb;\n --primary-light: #60a5fa;\n --secondary-color: #8b5cf6;\n --text-color: #1f2937;\n --background-color: #f9fafb;\n --surface-color: #ffffff;\n --error-color: #ef4444;\n --success-color: #10b981;\n --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n \n --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n }\n \n /* Dark mode support */\n @media (prefers-color-scheme: dark) {\n :root {\n --text-color: #f3f4f6;\n --background-color: #111827;\n --surface-color: #1f2937;\n --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n }\n }\n \n * {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n \n html, body {\n height: 100%;\n width: 100%;\n }\n \n body {\n font-family: var(--font-family);\n line-height: 1.5;\n color: var(--text-color);\n background-color: var(--background-color);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n \n #root {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n }\n \n .container {\n max-width: 800px;\n width: 100%;\n margin: 0 auto;\n padding: 1rem;\n }\n \n h1, h2, h3 {\n line-height: 1.2;\n margin-bottom: 1rem;\n }\n \n h1 {\n font-size: 1.875rem;\n }\n \n button {\n cursor: pointer;\n font-family: var(--font-family);\n font-weight: 500;\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 0.375rem;\n padding: 0.625rem 1.25rem;\n transition: background-color 0.2s;\n }\n \n button:hover {\n background-color: var(--primary-dark);\n }\n \n button:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n }\n \n button.secondary {\n background-color: transparent;\n color: var(--primary-color);\n border: 1px solid var(--primary-color);\n }\n \n button.secondary:hover {\n background-color: rgba(59, 130, 246, 0.1);\n }\n \n textarea {\n width: 100%;\n min-height: 150px;\n padding: 0.75rem;\n border: 1px solid #d1d5db;\n border-radius: 0.375rem;\n font-family: var(--font-family);\n font-size: 1rem;\n resize: vertical;\n color: var(--text-color);\n background-color: var(--surface-color);\n }\n \n textarea:focus {\n outline: none;\n border-color: var(--primary-color);\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);\n }\n \n /* Audio Player Styles */\n .audio-player {\n background-color: var(--surface-color);\n border-radius: 0.5rem;\n padding: 1rem;\n margin: 1rem 0;\n box-shadow: var(--card-shadow);\n }\n \n .player-title {\n font-weight: 600;\n margin-bottom: 0.5rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n \n .player-controls {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n margin: 1rem 0;\n }\n \n .seek-bar {\n width: 100%;\n -webkit-appearance: none;\n height: 8px;\n border-radius: 4px;\n background: #d1d5db;\n outline: none;\n margin: 1rem 0;\n }\n \n .seek-bar::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--primary-color);\n cursor: pointer;\n }\n \n .seek-bar::-moz-range-thumb {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--primary-color);\n cursor: pointer;\n border: none;\n }\n \n .time-display {\n display: flex;\n justify-content: space-between;\n font-size: 0.875rem;\n color: #6b7280;\n }\n \n .player-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n border-radius: 50%;\n background-color: var(--primary-color);\n color: white;\n transition: all 0.2s;\n border: none;\n padding: 0;\n }\n \n .player-button:hover {\n background-color: var(--primary-dark);\n transform: scale(1.05);\n }\n \n .player-button.secondary {\n background-color: var(--surface-color);\n color: var(--primary-color);\n border: 1px solid #d1d5db;\n }\n \n .player-button.secondary:hover {\n background-color: #f9fafb;\n }\n \n .play-button {\n width: 3rem;\n height: 3rem;\n font-size: 1.5rem;\n }\n \n .hidden {\n display: none;\n }\n \n .text-preview {\n background-color: var(--surface-color);\n border: 1px solid #d1d5db;\n border-radius: 0.375rem;\n padding: 0.75rem;\n margin-bottom: 1rem;\n max-height: 200px;\n overflow-y: auto;\n }\n \n .error-message {\n color: var(--error-color);\n background-color: rgba(239, 68, 68, 0.1);\n padding: 0.75rem;\n border-radius: 0.375rem;\n margin-bottom: 1rem;\n }\n \n footer {\n margin-top: auto;\n padding: 1rem 0;\n text-align: center;\n color: #6b7280;\n }\n \n a {\n color: var(--primary-color);\n text-decoration: none;\n }\n \n a:hover {\n text-decoration: underline;\n }\n \n /* Responsive adjustments */\n @media (max-width: 640px) {\n .container {\n padding: 0.75rem;\n }\n \n h1 {\n font-size: 1.5rem;\n }\n \n .player-controls {\n flex-wrap: wrap;\n justify-content: center;\n }\n }\n `;\n}",[],[219,244],[219],{"_102":253,"_95":200,"_155":115,"_157":-5,"_158":140,"_159":119,"_161":117,"_104":254,"_99":221,"_163":255,"_165":256,"_166":22,"_167":-5,"_168":257,"_98":258},"4f0d4982-23e0-11f0-a92e-569c3dd06744",["D",1745810675428],"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { Hono } from \"https://deno.land/x/hono@v3.11.7/mod.ts\";\nimport { cors } from \"https://deno.land/x/hono@v3.11.7/middleware.ts\";\nimport { App } from \"./components/App.ts\";\nimport { getHtml } from \"./ui/html.ts\";\nimport { textToSpeechHandler } from \"./handlers/index.ts\";\n\n/**\n * Client-only code that renders the React application\n */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Run client-side code only in the browser environment\nif (typeof document !== \"undefined\") {\n client();\n}\n\n// Create a new Hono app\nconst app = new Hono();\n\n// Enable CORS\napp.use('*', cors());\n\n// Configure error handling for better debugging\napp.onError((err, c) => {\n console.error(\"App Error:\", err);\n throw err; // Re-throw for full stack trace\n});\n\n// Add routes\napp.get(\"/\", (c) => {\n return getHtmlResponse(import.meta.url);\n});\n\napp.post(\"/text-to-speech\", textToSpeechHandler);\n\n// Helper function to generate HTML response\nfunction getHtmlResponse(importUrl: string) {\n const html = getHtml(importUrl);\n return new Response(html, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\n/**\n * Server handler that processes requests\n */\nexport default app.fetch;",[],[200],{"_102":260,"_95":261,"_155":262,"_157":-5,"_158":140,"_159":139,"_161":117,"_104":263,"_99":186,"_163":264,"_165":265,"_166":22,"_167":-5,"_168":266,"_98":267},"a0f54528-3034-11f0-83c7-569c3dd06744","moi.md","911f0972-3034-11f0-a4d5-569c3dd06744",["D",1747166304525],"file","---\ntitle: \"textToAudioPlayer\"\ndescription: \"A simple PWA audio player for pasted text\"\nauthor: \"dcm31\"\ntags: [\"val-town\"]\nexcludeFromPosts: true\n---\n\n# textToAudioPlayer\n\nA simple PWA audio player for pasted text",[],[261],{"_102":269,"_95":270,"_155":271,"_157":-5,"_158":140,"_159":272,"_161":117,"_104":273,"_99":32,"_163":255,"_165":274,"_166":22,"_167":-5,"_168":275,"_98":276},"9bd3fe20-23de-11f0-9f3e-569c3dd06744","sw.ts","9bd3fede-23de-11f0-9f3e-569c3dd06744",9,["D",1745809945246],"/**\n * Service Worker for the Text to Audio PWA Player\n * Enables offline functionality and PWA features\n */\n\n// Cache name for our app\nconst CACHE_NAME = 'text-audio-player-v1';\n\n// URLs to cache for offline access\nconst urlsToCache = [\n '/',\n '/index.html',\n];\n\nexport default async function server(request: Request): Promise {\n // Return the service worker script\n return new Response(`\n // Service Worker for Text to Audio PWA Player\n const CACHE_NAME = 'text-audio-player-v1';\n\n // Install event - caches key resources for offline use\n self.addEventListener('install', event => {\n console.log('Service Worker: Installing');\n self.skipWaiting();\n \n event.waitUntil(\n caches.open(CACHE_NAME)\n .then(cache => {\n console.log('Service Worker: Caching App Shell');\n return cache.addAll([\n '/',\n '/index.html'\n ]);\n })\n );\n });\n\n // Activate event - clean up old caches\n self.addEventListener('activate', event => {\n console.log('Service Worker: Activating');\n event.waitUntil(\n caches.keys().then(cacheNames => {\n return Promise.all(\n cacheNames.map(cacheName => {\n if (cacheName !== CACHE_NAME) {\n console.log('Service Worker: Clearing Old Cache', cacheName);\n return caches.delete(cacheName);\n }\n })\n );\n })\n );\n return self.clients.claim();\n });\n\n // Fetch event - serve cached content when offline\n self.addEventListener('fetch', event => {\n event.respondWith(\n caches.match(event.request)\n .then(response => {\n // Cache hit - return response\n if (response) {\n return response;\n }\n \n // Clone the request\n const fetchRequest = event.request.clone();\n \n // Make network request and cache the response\n return fetch(fetchRequest).then(response => {\n // Check if valid response\n if (!response || response.status !== 200 || response.type !== 'basic') {\n return response;\n }\n \n // Clone the response\n const responseToCache = response.clone();\n \n // Open cache and store the response\n caches.open(CACHE_NAME)\n .then(cache => {\n cache.put(event.request, responseToCache);\n });\n \n return response;\n });\n })\n );\n });\n `, {\n headers: {\n 'Content-Type': 'application/javascript',\n 'Service-Worker-Allowed': '/'\n }\n });\n}\n",[],[270],"files",[152,170,180,191,198,207,217,224,233,242,252,259,268],"counts",{"_281":32,"_282":186,"_283":32,"_284":285},"pulls","branches","forks","envVars",{"_286":32,"_287":32},"count","emptyCount","contents",[290,293,296,299,302,305],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":117,"_104":291,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":292},["D",1745809756809],[154],{"_102":192,"_95":193,"_155":194,"_157":-5,"_158":140,"_159":195,"_161":117,"_104":294,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":295},["D",1745810634820],[193],{"_102":218,"_95":219,"_155":220,"_157":-5,"_158":140,"_159":221,"_161":117,"_104":297,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":298},["D",1745809701234],[219],{"_102":253,"_95":200,"_155":115,"_157":-5,"_158":140,"_159":119,"_161":117,"_104":300,"_99":221,"_163":255,"_165":256,"_166":22,"_167":-5,"_98":301},["D",1745810675428],[200],{"_102":260,"_95":261,"_155":262,"_157":-5,"_158":140,"_159":139,"_161":117,"_104":303,"_99":186,"_163":264,"_165":265,"_166":22,"_167":-5,"_98":304},["D",1747166304525],[261],{"_102":269,"_95":270,"_155":271,"_157":-5,"_158":140,"_159":272,"_161":117,"_104":306,"_99":32,"_163":255,"_165":274,"_166":22,"_167":-5,"_98":307},["D",1745809945246],[270],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":316,"_288":321,"_334":-7,"_335":-5,"_336":-5,"_277":337,"_377":378,"_379":-5,"_380":-5},{"_102":103,"_95":96,"_104":317,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":119,"_120":32,"_16":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":318,"_134":319,"_137":320,"_149":22},["D",1745809680681],{"_93":94,"_132":133},{"_93":94,"_136":133},{"_99":139,"_95":43,"_102":140,"_141":103,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":96,"_148":94},[322,324,326,328,330,332],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":117,"_104":291,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":323},[154],{"_102":192,"_95":193,"_155":194,"_157":-5,"_158":140,"_159":195,"_161":117,"_104":294,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":325},[193],{"_102":218,"_95":219,"_155":220,"_157":-5,"_158":140,"_159":221,"_161":117,"_104":297,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":327},[219],{"_102":253,"_95":200,"_155":115,"_157":-5,"_158":140,"_159":119,"_161":117,"_104":300,"_99":221,"_163":255,"_165":256,"_166":22,"_167":-5,"_98":329},[200],{"_102":260,"_95":261,"_155":262,"_157":-5,"_158":140,"_159":139,"_161":117,"_104":303,"_99":186,"_163":264,"_165":265,"_166":22,"_167":-5,"_98":331},[261],{"_102":269,"_95":270,"_155":271,"_157":-5,"_158":140,"_159":272,"_161":117,"_104":306,"_99":32,"_163":255,"_165":274,"_166":22,"_167":-5,"_98":333},[270],"readme","upstream","pull",[338,340,343,347,349,352,356,358,361,364,368,371,374],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":140,"_159":160,"_161":117,"_104":162,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":339,"_98":346},[340,343],{"_102":171,"_95":172,"_155":173,"_157":156,"_158":140,"_159":174,"_161":117,"_104":175,"_99":32,"_163":176,"_165":177,"_166":22,"_167":-5,"_168":341,"_98":342},[],[154,172],{"_102":181,"_95":182,"_155":183,"_157":156,"_158":140,"_159":184,"_161":117,"_104":185,"_99":186,"_163":176,"_165":187,"_166":22,"_167":-5,"_168":344,"_98":345},[],[154,182],[154],{"_102":192,"_95":193,"_155":194,"_157":-5,"_158":140,"_159":195,"_161":117,"_104":196,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":348,"_98":355},[349,352],{"_102":199,"_95":200,"_155":201,"_157":194,"_158":140,"_159":202,"_161":117,"_104":203,"_99":32,"_163":176,"_165":204,"_166":22,"_167":-5,"_168":350,"_98":351},[],[193,200],{"_102":208,"_95":209,"_155":210,"_157":194,"_158":140,"_159":211,"_161":117,"_104":212,"_99":32,"_163":176,"_165":213,"_166":22,"_167":-5,"_168":353,"_98":354},[],[193,209],[193],{"_102":218,"_95":219,"_155":220,"_157":-5,"_158":140,"_159":221,"_161":117,"_104":222,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":357,"_98":367},[358,361,364],{"_102":225,"_95":226,"_155":227,"_157":220,"_158":140,"_159":228,"_161":117,"_104":229,"_99":32,"_163":176,"_165":230,"_166":22,"_167":-5,"_168":359,"_98":360},[],[219,226],{"_102":234,"_95":235,"_155":236,"_157":220,"_158":140,"_159":237,"_161":117,"_104":238,"_99":32,"_163":176,"_165":239,"_166":22,"_167":-5,"_168":362,"_98":363},[],[219,235],{"_102":243,"_95":244,"_155":245,"_157":220,"_158":140,"_159":246,"_161":117,"_104":247,"_99":32,"_163":176,"_165":248,"_166":22,"_167":-5,"_168":365,"_98":366},[],[219,244],[219],{"_102":253,"_95":200,"_155":115,"_157":-5,"_158":140,"_159":119,"_161":117,"_104":254,"_99":221,"_163":255,"_165":256,"_166":22,"_167":-5,"_168":369,"_98":370},[],[200],{"_102":260,"_95":261,"_155":262,"_157":-5,"_158":140,"_159":139,"_161":117,"_104":263,"_99":186,"_163":264,"_165":265,"_166":22,"_167":-5,"_168":372,"_98":373},[],[261],{"_102":269,"_95":270,"_155":271,"_157":-5,"_158":140,"_159":272,"_161":117,"_104":273,"_99":32,"_163":255,"_165":274,"_166":22,"_167":-5,"_168":375,"_98":376},[],[270],"previews",[368,374],"ahead","behind","actionData","errors"]

Input Text