Text to Speech Player

\n \n

\n        \n        <div className=\"voice-selector\">\n          <label htmlFor=\"voice-select\">Voice:</label>\n          <select \n            id=\"voice-select\" \n            value={selectedVoice} \n            onChange={(e) => setSelectedVoice(e.target.value)}\n            className=\"voice-select\"\n          >\n            {voices.map(voice => (\n              <option key={voice.id} value={voice.id}>{voice.name}</option>\n            ))}\n          </select>\n          <button \n            onClick={generateSpeech} \n            className=\"generate-btn\"\n            disabled={isLoading || !text.trim()}\n          >\n            {isLoading ? \"Generating...\" : \"Generate Speech\"}\n          </button>\n        </div>\n      </div>\n\n      <audio ref={audioRef} />\n\n      {audioSrc && (\n        <div className=\"player-controls\">\n          <div className=\"time-display\">\n            <span>{formatTime(currentTime)}</span>\n            <span>-{formatTime(Math.max(0, duration - currentTime))}</span>\n          </div>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max={duration || 0}\n            value={currentTime}\n            onChange={handleSeek}\n            className=\"time-slider\"\n          />\n\n          <div className=\"controls-row\">\n            <button onClick={() => changePlaybackRate()} className=\"rate-btn\">\n              {playbackRate.toFixed(1)}x\n            </button>\n            <button onClick={() => skipTime(-10)} className=\"skip-btn\">\n              -10s\n            </button>\n            <button onClick={togglePlayPause} className=\"play-btn\">\n              {isPlaying ? \"❚❚\" : \"▶\"}\n            </button>\n            <button onClick={() => skipTime(10)} className=\"skip-btn\">\n              +10s\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div className=\"container\">\n      <AudioPlayer />\n      <footer>\n        <p>\n          <a href={import.meta.url.replace(\"esm.town\", \"val.town\")} target=\"_top\">\n            View Source\n          </a>\n        </p>\n      </footer>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\n\nif (typeof document !== \"undefined\") {\n  client();\n}\n\nexport default async function server(request: Request): Promise<Response> {\n  const url = new URL(request.url);\n\n  // Handle the API endpoint to generate speech from text\n  if (url.pathname === '/generate-speech' && request.method === 'POST') {\n    try {\n      const { text, voice } = await request.json();\n      \n      // Using the OpenAI standard library for TTS\n      const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n      const openai = new OpenAI();\n      \n      const mp3 = await openai.audio.speech.create({\n        model: \"tts-1\",\n        voice: voice || \"alloy\",\n        input: text,\n      });\n      \n      const buffer = await mp3.arrayBuffer();\n      \n      return new Response(buffer, {\n        headers: {\n          'Content-Type': 'audio/mpeg',\n          'Cache-Control': 'public, max-age=86400'\n        }\n      });\n    } catch (error) {\n      console.error('Error generating speech:', error);\n      return new Response(JSON.stringify({ error: 'Failed to generate speech' }), {\n        status: 500,\n        headers: { 'Content-Type': 'application/json' }\n      });\n    }\n  }\n\n  // Handle manifest.json for PWA\n  if (url.pathname === '/manifest.json') {\n    return new Response(JSON.stringify({\n      name: \"Simple Audio Player\",\n      short_name: \"Audio Player\",\n      start_url: \"/\",\n      display: \"standalone\",\n      background_color: \"#2a2a2a\",\n      theme_color: \"#4a4a9a\",\n      icons: [\n        {\n          src: \"https://maxm-imggenurl.web.val.run/audio-player-icon-minimal-design\",\n          sizes: \"192x192\",\n          type: \"image/png\"\n        },\n        {\n          src: \"https://maxm-imggenurl.web.val.run/audio-player-icon-minimal-design\",\n          sizes: \"512x512\",\n          type: \"image/png\"\n        }\n      ]\n    }), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Handle service worker for PWA\n  if (url.pathname === '/sw.js') {\n    return new Response(`\n      self.addEventListener('install', (event) => {\n        self.skipWaiting();\n        event.waitUntil(\n          caches.open('v1').then((cache) => {\n            return cache.addAll([\n              '/',\n              '/manifest.json'\n            ]);\n          })\n        );\n      });\n\n      self.addEventListener('activate', (event) => {\n        event.waitUntil(clients.claim());\n      });\n\n      self.addEventListener('fetch', (event) => {\n        event.respondWith(\n          caches.match(event.request).then((response) => {\n            return response || fetch(event.request);\n          })\n        );\n      });\n    `, {\n      headers: { 'Content-Type': 'application/javascript' }\n    });\n  }\n\n  // Main HTML\n  return new Response(\n    `<!DOCTYPE html>\n    <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>Simple Audio Player</title>\n        <meta name=\"description\" content=\"A simple text-to-speech player with podcast-style controls\">\n        <link rel=\"manifest\" href=\"/manifest.json\">\n        <meta name=\"theme-color\" content=\"#4a4a9a\">\n        <link rel=\"apple-touch-icon\" href=\"https://maxm-imggenurl.web.val.run/audio-player-icon-minimal-design\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n        <script>\n          if ('serviceWorker' in navigator) {\n            navigator.serviceWorker.register('/sw.js')\n              .then(registration => {\n                console.log('ServiceWorker registration successful');\n              })\n              .catch(err => {\n                console.log('ServiceWorker registration failed:', err);\n              });\n          }\n        </script>\n      </body>\n    </html>`,\n    {\n      headers: {\n        \"content-type\": \"text/html\",\n      },\n    }\n  );\n}\n\nconst css = `\n  :root {\n    --primary-color: #4a4a9a;\n    --secondary-color: #7272d8;\n    --text-color: #e0e0e0;\n    --background-color: #242424;\n    --card-bg-color: #333333;\n    --control-bg-color: #444444;\n    --accent-color: #5cbbf6;\n  }\n\n  * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n    background-color: var(--background-color);\n    color: var(--text-color);\n    line-height: 1.6;\n    overflow-x: hidden;\n  }\n\n  .container {\n    max-width: 600px;\n    margin: 0 auto;\n    padding: 1rem;\n  }\n\n  h1 {\n    font-size: 1.5rem;\n    text-align: center;\n    margin-bottom: 1.5rem;\n    color: var(--accent-color);\n  }\n\n  .audio-player {\n    background-color: var(--card-bg-color);\n    border-radius: 10px;\n    padding: 1.5rem;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    margin-bottom: 1.5rem;\n  }\n\n  .text-input-container {\n    margin-bottom: 1.5rem;\n  }\n\n  .text-input {\n    width: 100%;\n    padding: 12px;\n    border-radius: 6px;\n    border: 1px solid #555;\n    background-color: #222;\n    color: var(--text-color);\n    font-size: 1rem;\n    resize: vertical;\n    margin-bottom: 1rem;\n    transition: border-color 0.3s;\n  }\n\n  .text-input:focus {\n    outline: none;\n    border-color: var(--primary-color);\n  }\n\n  .voice-selector {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .voice-select {\n    flex: 1;\n    padding: 8px;\n    background-color: #222;\n    color: var(--text-color);\n    border: 1px solid #555;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n\n  .generate-btn {\n    padding: 10px 15px;\n    background-color: var(--primary-color);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 1rem;\n    cursor: pointer;\n    transition: background-color 0.3s;\n  }\n\n  .generate-btn:hover {\n    background-color: var(--secondary-color);\n  }\n\n  .generate-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .player-controls {\n    background-color: var(--control-bg-color);\n    border-radius: 8px;\n    padding: 1rem;\n    margin-top: 1rem;\n  }\n\n  .time-display {\n    display: flex;\n    justify-content: space-between;\n    font-size: 0.875rem;\n    margin-bottom: 0.5rem;\n    color: #aaa;\n  }\n\n  .time-slider {\n    width: 100%;\n    height: 4px;\n    -webkit-appearance: none;\n    background: #555;\n    border-radius: 2px;\n    outline: none;\n    margin-bottom: 1rem;\n  }\n\n  .time-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 15px;\n    height: 15px;\n    background: var(--accent-color);\n    border-radius: 50%;\n    cursor: pointer;\n  }\n\n  .controls-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .controls-row button {\n    background-color: transparent;\n    border: none;\n    color: var(--text-color);\n    cursor: pointer;\n    padding: 0.5rem;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .controls-row button:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .play-btn {\n    width: 50px;\n    height: 50px;\n    background-color: var(--primary-color) !important;\n    font-size: 1.25rem;\n    border-radius: 50%;\n  }\n\n  .play-btn:hover {\n    background-color: var(--secondary-color) !important;\n  }\n\n  .rate-btn {\n    font-size: 0.875rem;\n    width: 40px;\n    height: 40px;\n  }\n\n  .skip-btn {\n    font-size: 0.875rem;\n  }\n\n  footer {\n    text-align: center;\n    font-size: 0.875rem;\n    opacity: 0.7;\n  }\n\n  footer a {\n    color: var(--accent-color);\n    text-decoration: none;\n  }\n\n  footer a:hover {\n    text-decoration: underline;\n  }\n\n  @media (max-width: 480px) {\n    .container {\n      padding: 0.75rem;\n    }\n    \n    .audio-player {\n      padding: 1rem;\n    }\n    \n    h1 {\n      font-size: 1.25rem;\n    }\n    \n    .voice-selector {\n      flex-direction: column;\n    }\n    \n    .play-btn {\n      width: 45px;\n      height: 45px;\n    }\n    \n    .rate-btn, .skip-btn {\n      width: 36px;\n      height: 36px;\n      font-size: 0.75rem;\n    }\n  }\n`;\n","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/SimpleAudioPlayerPWA/code/index.ts","extension","actionData","errors"]
</article></body></html>