A modern web application that converts text to speech using OpenAI's advanced text-to-speech API. Features a ChatGPT-like dark interface with voice selection and audio playback.
- 🎙️ Multiple Voice Options - Choose from 6 different OpenAI voices (Alloy, Echo, Fable, Onyx, Nova, Shimmer)
- 🔐 Encrypted Storage - API key encrypted with Web Crypto API and stored locally
- 🌐 URL Reading - Paste any webpage URL to automatically fetch and read its content
- 🔗 Smart URL Routing - Access
readittome.ai/example.com/articleto read that page directly - 📝 Unlimited Length - Automatically chunks long texts (handles articles of any size)
- 🎵 Streaming Playback - Start listening in 2-3 seconds, even for huge articles
- 🔄 Smart Chunking - Splits at sentence boundaries and concatenates audio seamlessly
- 🎨 Modern Dark UI - ChatGPT-inspired interface with smooth animations
- 💾 Download Audio - Save generated speech as MP3 files
- ⚡ Intelligent Extraction - Automatically extracts main content from webpages
- 📊 Progress Tracking - Shows real-time progress for long text generation
- Node.js 18+ installed
- An OpenAI API key (Get one here)
-
Clone the repository
git clone <your-repo-url> cd readittome
-
Install dependencies
npm install
-
Run the development server
npm run dev
-
Open your browser Navigate to http://localhost:3000
- Connect OpenAI: Click the "Connect OpenAI" button in the top right corner
- Enter API Key: Paste your OpenAI API key (it's stored encrypted in your browser)
- Select Voice: Choose your preferred voice from the dropdown (defaults to Nova)
- Enter Text: Paste or type any text you want to convert to speech
- Generate: Click "Generate Speech" to create the audio
- Listen & Download: Play the audio directly or download it as an MP3 file
Method 1: Paste URL in Text Box
- Copy any webpage URL (e.g.,
https://blog.example.com/article) - Paste it into the text box
- Click "Generate Speech" - the content will be automatically fetched and displayed
- Click again to generate the audio
Method 2: Direct URL Access
Simply prepend readittome.ai/ to any URL:
- Original:
https://blog.oceanprotocol.com/the-asi-alliance-f7848b2ad61f - Read It:
readittome.ai/blog.oceanprotocol.com/the-asi-alliance-f7848b2ad61f
The content will be automatically extracted and ready to convert to speech!
Streaming Playback (NEW!):
- 🎵 Instant playback - First chunk starts playing immediately
- 🔄 Background generation - Remaining chunks generate while you listen
- ⚡ No waiting - Start listening in ~2-3 seconds, even for huge articles
- 📊 Progress tracking - See "Generating... (2/5)" for remaining chunks
- 🎧 Seamless experience - Final audio concatenates automatically for replay
How It Works:
- Paste a 15,000 character article
- First chunk (4,000 chars) generates in 2-3 seconds
- Audio starts playing automatically 🎵
- Chunks 2-4 generate in the background while you listen
- Progress shows "Generating... (2/4)", "Generating... (3/4)", etc.
- Once complete, the full audio is available for replay/download
Example Timeline:
0:00 - Click "Generate Speech"
0:03 - First chunk ready → Starts playing automatically!
0:05 - You're listening to chunk 1, chunk 2 is being generated
0:10 - Chunk 3 being generated (you're still listening)
0:15 - All chunks complete → Full audio available
No more waiting for the entire article to generate before listening! 🚀
- Alloy - Neutral and balanced
- Echo - Clear and direct
- Fable - Expressive and warm
- Onyx - Deep and authoritative
- Nova - Friendly and conversational (default)
- Shimmer - Bright and energetic
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- API: OpenAI API (TTS-1-HD model)
- Audio: HTML5 Audio with download support
This is a privacy-first Next.js application:
- Minimal server-side processing (PDF text extraction, URL content fetching)
- Direct text-to-speech calls from browser to OpenAI API
- No permanent data storage - all processing is ephemeral
- Requires Next.js server for API routes (PDF processing, URL fetching)
Privacy-first architecture with minimal server processing:
- ✅ AES-256 Encryption - API key encrypted using Web Crypto API before storage
- ✅ Direct TTS Connection - Text-to-speech requests go directly to OpenAI, no middleman
- ✅ Minimal Server Use - PDFs processed temporarily on server for text extraction only
- ✅ No Permanent Storage - Files and data immediately discarded after processing
- ✅ Local Only - Encrypted key stored only in your browser's localStorage
- ✅ No Tracking - Zero data collection, analytics, or logging
- ✅ No Cookies - Uses encrypted localStorage only
- ✅ Open Source - Fully transparent, auditable code
Data Flow:
Text Input → Browser → OpenAI API (direct text-to-speech)
PDF Upload → Server (temporary extraction) → Browser → OpenAI API
URL Fetch → Server (content extraction) → Browser → OpenAI API
↑
[No permanent storage - immediately discarded]
Your API key never touches any server except OpenAI's. PDFs are processed temporarily and immediately discarded.
# Create an optimized production build
npm run build
# Start the production server
npm startThis is a Next.js application with API routes, so it requires a Node.js server.
- Push to GitHub
- Import on Vercel
- Deploy! (No environment variables needed)
- Vercel will automatically detect Next.js and deploy with server-side API routes
You can deploy to any platform that supports Next.js:
- Netlify: Supports Next.js with API routes
- Railway: Full Next.js support
- Render: Node.js hosting for Next.js apps
- Self-hosted: Run
npm run build && npm starton any Node.js server
# Run development server
npm run dev
# Build for production
npm run build
# Run linter
npm run lintMIT
Contributions are welcome! Please feel free to submit a Pull Request.
If you encounter any issues or have questions, please open an issue on GitHub.
Made with ❤️ using OpenAI's Text-to-Speech API