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}",[],[158,176],{"_105":185,"_96":186,"_159":187,"_161":160,"_162":144,"_163":188,"_165":120,"_107":189,"_101":190,"_167":180,"_169":191,"_170":22,"_171":-5,"_172":192,"_99":193},"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}",[],[158,186],[158],{"_105":196,"_96":197,"_159":198,"_161":-5,"_162":144,"_163":199,"_165":120,"_107":200,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":201,"_99":220},"36d886ba-23e0-11f0-9cd2-569c3dd06744","handlers","36d88796-23e0-11f0-9cd2-569c3dd06744",22,["D",1745810634820],[202,211],{"_105":203,"_96":204,"_159":205,"_161":198,"_162":144,"_163":206,"_165":120,"_107":207,"_101":32,"_167":180,"_169":208,"_170":22,"_171":-5,"_172":209,"_99":210},"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';",[],[197,204],{"_105":212,"_96":213,"_159":214,"_161":198,"_162":144,"_163":215,"_165":120,"_107":216,"_101":32,"_167":180,"_169":217,"_170":22,"_171":-5,"_172":218,"_99":219},"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};",[],[197,213],[197],{"_105":222,"_96":223,"_159":224,"_161":-5,"_162":144,"_163":225,"_165":120,"_107":226,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":227,"_99":255},"0a625428-23de-11f0-a378-569c3dd06744","ui","0a625518-23de-11f0-a378-569c3dd06744",2,["D",1745809701234],[228,237,246],{"_105":229,"_96":230,"_159":231,"_161":224,"_162":144,"_163":232,"_165":120,"_107":233,"_101":32,"_167":180,"_169":234,"_170":22,"_171":-5,"_172":235,"_99":236},"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}",[],[223,230],{"_105":238,"_96":239,"_159":240,"_161":224,"_162":144,"_163":241,"_165":120,"_107":242,"_101":32,"_167":180,"_169":243,"_170":22,"_171":-5,"_172":244,"_99":245},"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}",[],[223,239],{"_105":247,"_96":248,"_159":249,"_161":224,"_162":144,"_163":250,"_165":120,"_107":251,"_101":32,"_167":180,"_169":252,"_170":22,"_171":-5,"_172":253,"_99":254},"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}",[],[223,248],[223],{"_105":257,"_96":204,"_159":118,"_161":-5,"_162":144,"_163":123,"_165":120,"_107":258,"_101":225,"_167":259,"_169":260,"_170":22,"_171":-5,"_172":261,"_99":262},"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;",[],[204],{"_105":264,"_96":100,"_159":265,"_161":-5,"_162":144,"_163":102,"_165":22,"_107":266,"_101":32,"_167":267,"_169":268,"_170":22,"_171":-5,"_172":269,"_99":270},"911f086e-3034-11f0-a4d5-569c3dd06744","911f0972-3034-11f0-a4d5-569c3dd06744",["D",1747166277957],"file","---\ntitle: \"textToAudioPlayer\"\ndescription: \"A simple PWA audio player for pasted text\"\nimageUrl: \"\"\nurl: \"\"\nauthor: \"dcm31\"\ntags: [\"val-town\"]\n---\n\n# textToAudioPlayer\n\nA simple PWA audio player for pasted text\n",[],[100],{"_105":272,"_96":273,"_159":274,"_161":-5,"_162":144,"_163":275,"_165":120,"_107":276,"_101":32,"_167":259,"_169":277,"_170":22,"_171":-5,"_172":278,"_99":279},"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",[],[273],"files",[156,174,184,195,202,211,221,228,237,246,256,263,271],"counts",{"_284":32,"_285":190,"_286":32,"_287":288,"_291":292},"pulls","branches","forks","envVars",{"_289":32,"_290":32},"count","emptyCount","connections",{"_289":32,"_293":32},"unfilledCount","contents",[],{"_105":264,"_96":100,"_159":265,"_161":-5,"_162":144,"_163":102,"_165":22,"_107":297,"_101":32,"_167":267,"_169":268,"_170":22,"_171":-5,"_99":298},["D",1747166277957],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":307,"_154":312,"_280":352,"_267":353,"_294":355,"_356":-5,"_357":-5,"_358":-5,"_359":-5,"_360":361,"_287":-5},{"_105":106,"_96":97,"_107":308,"_109":-5,"_110":22,"_111":112,"_113":114,"_115":-5,"_14":116,"_117":118,"_119":120,"_121":-5,"_122":123,"_124":32,"_16":125,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":309,"_138":310,"_141":311,"_153":22},["D",1745809680681],{"_94":95,"_136":137},{"_94":95,"_140":137,"_14":116},{"_101":143,"_96":44,"_105":144,"_145":106,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":97,"_152":95},[313,322,331,343,346,349],{"_105":157,"_96":158,"_159":160,"_161":-5,"_162":144,"_163":164,"_165":120,"_107":166,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":314,"_99":321},[315,318],{"_105":175,"_96":176,"_159":177,"_161":160,"_162":144,"_163":178,"_165":120,"_107":179,"_101":32,"_167":180,"_169":181,"_170":22,"_171":-5,"_172":316,"_99":317},[],[158,176],{"_105":185,"_96":186,"_159":187,"_161":160,"_162":144,"_163":188,"_165":120,"_107":189,"_101":190,"_167":180,"_169":191,"_170":22,"_171":-5,"_172":319,"_99":320},[],[158,186],[158],{"_105":196,"_96":197,"_159":198,"_161":-5,"_162":144,"_163":199,"_165":120,"_107":200,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":323,"_99":330},[324,327],{"_105":203,"_96":204,"_159":205,"_161":198,"_162":144,"_163":206,"_165":120,"_107":207,"_101":32,"_167":180,"_169":208,"_170":22,"_171":-5,"_172":325,"_99":326},[],[197,204],{"_105":212,"_96":213,"_159":214,"_161":198,"_162":144,"_163":215,"_165":120,"_107":216,"_101":32,"_167":180,"_169":217,"_170":22,"_171":-5,"_172":328,"_99":329},[],[197,213],[197],{"_105":222,"_96":223,"_159":224,"_161":-5,"_162":144,"_163":225,"_165":120,"_107":226,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_172":332,"_99":342},[333,336,339],{"_105":229,"_96":230,"_159":231,"_161":224,"_162":144,"_163":232,"_165":120,"_107":233,"_101":32,"_167":180,"_169":234,"_170":22,"_171":-5,"_172":334,"_99":335},[],[223,230],{"_105":238,"_96":239,"_159":240,"_161":224,"_162":144,"_163":241,"_165":120,"_107":242,"_101":32,"_167":180,"_169":243,"_170":22,"_171":-5,"_172":337,"_99":338},[],[223,239],{"_105":247,"_96":248,"_159":249,"_161":224,"_162":144,"_163":250,"_165":120,"_107":251,"_101":32,"_167":180,"_169":252,"_170":22,"_171":-5,"_172":340,"_99":341},[],[223,248],[223],{"_105":257,"_96":204,"_159":118,"_161":-5,"_162":144,"_163":123,"_165":120,"_107":258,"_101":225,"_167":259,"_169":260,"_170":22,"_171":-5,"_172":344,"_99":345},[],[204],{"_105":264,"_96":100,"_159":265,"_161":-5,"_162":144,"_163":102,"_165":22,"_107":266,"_101":32,"_167":267,"_169":268,"_170":22,"_171":-5,"_172":347,"_99":348},[],[100],{"_105":272,"_96":273,"_159":274,"_161":-5,"_162":144,"_163":275,"_165":120,"_107":276,"_101":32,"_167":259,"_169":277,"_170":22,"_171":-5,"_172":350,"_99":351},[],[273],[313,315,318,322,324,327,331,333,336,339,343,346,349],{"_105":264,"_96":100,"_159":265,"_161":-5,"_162":144,"_163":102,"_165":22,"_107":297,"_101":32,"_167":267,"_169":268,"_170":22,"_171":-5,"_99":354},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

Input Text