This repository demonstrates how to implement streaming responses in a Next.js application. It includes examples of streaming audio files, text messages, and text-to-speech (TTS) audio using the ElevenLabs API.
• Introduction
• Prerequisites
• Installation
• Environment Variables
• Running the Application
• API Endpoints
• /stream/audio
• /stream/text
• /stream/tts
• Testing the Endpoints
• Notes
• License
This Next.js application showcases how to use the Web Streams API to stream data to clients. It includes three API routes under the /stream path: • /stream/audio: Streams an audio file in chunks. • /stream/text: Streams text messages with delays between them. • /stream/tts: Streams text-to-speech audio generated by the ElevenLabs API.
• Node.js v14 or later
• npm or yarn package manager
• An API key for ElevenLabs (required for the /stream/tts endpoint)
1. Clone the repository:
git clone https://github.com/your-username/your-repo.git cd your-repo
2. Install dependencies:
Using npm:
npm install
Or using yarn:
yarn install
3. Add an audio file:
• Place an audio.mp3 file in the public directory of the project root. This file will be used by the /stream/audio endpoint.
Create a .env.local file in the root directory and add the following environment variable:
ELEVENLABS_API_KEY=your_elevenlabs_api_key
Replace your_elevenlabs_api_key with your actual API key from ElevenLabs.
Start the development server:
Using npm:
npm run dev
Or using yarn:
yarn dev
The application will be running at http://localhost:3000.
• Description: Streams an audio file (audio.mp3) in chunks of 64KB to the client.
• Method: GET
• Response Headers:
• Content-Type: audio/mpeg
• Cache-Control: no-cache
• Connection: keep-alive
Implementation Details
• Reads the audio.mp3 file from the public directory.
• Uses a ReadableStream to stream the file in chunks.
• Adds a small delay between chunks to simulate real-time streaming.
Usage
curl http://localhost:3000/stream/audio --output streamed_audio.mp3
Description: Streams a series of text messages to the client, with a delay between each message. • Method: GET • Response Headers: • Content-Type: text/event-stream • Cache-Control: no-cache • Connection: keep-alive
Implementation Details
• Uses a ReadableStream to stream text messages.
• Messages are encoded using TextEncoder.
• Delays of 1 second between messages simulate processing time.
Messages Streamed
1. “👋 Hello from the stream!”
2. “🚀 Loading your data…”
3. “📦 Processing items…”
4. “✨ Almost there…”
5. “✅ Stream complete!”
Usage
curl http://localhost:3000/stream/text
Description: Streams text-to-speech audio generated by the ElevenLabs API. • Method: GET • Response Headers: • Content-Type: audio/mpeg • Cache-Control: no-cache • Connection: keep-alive
Implementation Details
• Utilizes the ElevenLabs API to generate TTS audio.
• Streams the audio data directly to the client.
• Voice used: “Jessica”
• Text: “This is a… streaming voice”
• Model ID: “eleven_turbo_v2_5”
• Output Format: “mp3_44100_64”
Usage
curl http://localhost:3000/stream/tts --output tts_audio.mp3
Testing the Endpoints
You can test the endpoints using curl, Postman, or any HTTP client.
curl http://localhost:3000/stream/audio --output streamed_audio.mp3
• This command will save the streamed audio to streamed_audio.mp3.
curl http://localhost:3000/stream/text
• You should see the messages printed with delays between them.
curl http://localhost:3000/stream/tts --output tts_audio.mp3
• This command will save the TTS audio to tts_audio.mp3.
• ElevenLabs API Key: Ensure that you have a valid API key from ElevenLabs and that you have sufficient quota for TTS generation.
• Audio File: The audio.mp3 file should be placed in the public directory before running the application.
• Delays in Streaming: The delays added in the streaming functions simulate real-time data processing and can be adjusted or removed as needed.
• Content Types: The Content-Type headers in the responses are important for the client to correctly handle the streamed data.
This project is open-source and available under the MIT License.