Radiai
Overview
Radiai is an AI music radio with a vintage twist powered by ElevenLabs Music and Sound Effects.
Key Features
- Functional Buttons and Knobs: You can interact with the radio model's buttons and knobs to change stations, and control the volume, bass, and tuning, mimicking the look and feel of a real radio.
- Realistic audio processing: The audio output is processed with Web Audio API to add distortions and noise.
- Synced playback across devices: Hash-based logic is used to determine the active track in each station so that all listeners get a live listening experience.
How It Works
Instead of a traditional UI, this project recreates the feel of a real radio for a more immersive experience. The radio itself was modeled in Blender and imported into Three.js with React Three Fiber as a GLTF asset. Every button and knob is fully interactive through React, making the radio behave like its physical counterpart.
The music is generated with ElevenLabs Music and stored as static files in an Appwrite storage bucket. A custom Next.js API route uses timestamp hashing to decide which track is currently live on each station, ensuring all listeners share the same real-time experience. On the client side, tuning to a frequency plays the nearest station’s track, while the Web Audio API adds distortion and noise effects that intensify the farther you drift from the signal.
Technologies Used
- ElevenLabs Music
- Next.js
- TypeScript
- Three.js with React Three Fiber
- Appwrite storage bucket, sites for deployment.
Future Plans
- Support dynamic music generation with ElevenLabs Music API.
- Allow users to customize the prompts at different radio stations for their own preferred music.
- Integrate with ElevenLabs TTS API to generate announcements, podcast-like content, ads, in between music.