Broadcast your music from AIMP, Winamp, or Spotify and share with your friends in real-time.

• 🎵 Real-time music streaming with Icecast
• 🌓 Dark/Light mode with smooth transitions
• 📱 Responsive and minimalist design
• 🎨 Smooth and elegant animations
• 👥 Live listeners list
• 📋 Playlist visualization
• 🎨 Real-time audio visualizer - Connected to your actual music stream using Web Audio API
• 📊 Radio statistics (uptime, songs played, listeners)
• 📜 Song history
• 🔗 Social sharing (Twitter, Facebook, native share)
• 💖 Live reactions - Listeners can react to songs in real-time
• ⚡ Real-time updates with SWR
• 🎙️ Icecast server integration ready

• Next.js 15 - React Framework
• TypeScript - Static typing
• Tailwind CSS v4 - Styling
• SWR - Data fetching
• shadcn/ui - UI Components
• Web Audio API - Real-time audio visualization and analysis
• Icecast - Audio streaming server

```bash npm install ```

Create a .env.local file:

```env

NEXT_PUBLIC_ICECAST_URL=http://localhost:8000/myradio

SPOTIFY_CLIENT_ID=your_client_id SPOTIFY_CLIENT_SECRET=your_client_secret SPOTIFY_REDIRECT_URI=http://localhost:3000/api/auth/callback ```

```bash npm run dev ```

Open http://localhost:3000

This guide will take you from the current mock/demo state to a fully functional streaming radio.

✅ Beautiful UI with animations
✅ Dark/Light theme
✅ Mock data for songs, playlist, listeners
✅ Demo audio visualizer (animated bars)
⚠️ NOT CONNECTED to real music yet

1. Icecast Server - Streams your audio to the web
2. Source Client - AIMP/Winamp plugin to send audio to Icecast
3. Metadata Sync - Script to sync song info from Icecast to your app
4. Audio Connection - Connect visualizer to real stream

Icecast is the streaming server that broadcasts your audio.

Linux (Ubuntu/Debian): ```bash sudo apt-get update sudo apt-get install icecast2 ```

macOS: ```bash brew install icecast ```

Windows:

1. Download from icecast.org
2. Run installer
3. Install as Windows service (recommended)

Edit Icecast config file:

• Linux: /etc/icecast2/icecast.xml
• macOS: /usr/local/etc/icecast.xml
• Windows: C:\Program Files\Icecast2\etc\icecast.xml

```xml 100 2 65535

<authentication>
    <source-password>YOUR_PASSWORD_HERE</source-password>
    <relay-password>YOUR_PASSWORD_HERE</relay-password>
    <admin-user>admin</admin-user>
    <admin-password>YOUR_ADMIN_PASSWORD</admin-password>
</authentication>

<hostname>localhost</hostname>

<listen-socket>
    <port>8000</port>
</listen-socket>

<http-headers>
    <header name="Access-Control-Allow-Origin" value="*" />
    <header name="Access-Control-Allow-Methods" value="GET, POST, OPTIONS" />
    <header name="Access-Control-Allow-Headers" value="*" />
</http-headers>

<paths>
    <logdir>/var/log/icecast2</logdir>
    <webroot>/usr/share/icecast2/web</webroot>
    <adminroot>/usr/share/icecast2/admin</adminroot>
</paths>

Start Icecast: ```bash

sudo systemctl start icecast2 sudo systemctl enable icecast2 # Auto-start on boot

icecast -c /usr/local/etc/icecast.xml

```

Verify it's running: Open http://localhost:8000 in your browser. You should see the Icecast admin page.

3.1 Install AIMP Icecast Plugin

1. Download from AIMP Plugins
2. Extract to AIMP plugins folder: C:\Program Files\AIMP\Plugins\
3. Restart AIMP

3.2 Configure AIMP Plugin

1. Open AIMP
2. Go to Menu > Preferences > Plugins > Icecast Source
3. Configure:
   • Server: localhost
   • Port: 8000
   • Password: (your source-password from icecast.xml)
   • Mount point: /myradio
   • Format: MP3
   • Bitrate: 128 kbps (or higher)
   • Name: My Personal Radio
   • Description: Broadcasting from AIMP
4. Click Connect

Your stream is now live at: http://localhost:8000/myradio

4.1 Install Edcast DSP Plugin

1. Download Edcast DSP
2. Install to Winamp plugins folder
3. Restart Winamp

4.2 Configure Edcast

1. Open Winamp
2. Go to Options > Preferences > DSP/Effect > Edcast DSP
3. Click Add Encoder
4. Configure:
   • Server Type: Icecast 2
   • Server: localhost
   • Port: 8000
   • Password: (your source-password)
   • Mount point: /myradio
   • Encoder: MP3 Lame
   • Bitrate: 128 kbps
5. Click Connect

5.1 Update Environment Variable

Edit .env.local: ```env NEXT_PUBLIC_ICECAST_URL=http://localhost:8000/myradio ```

5.2 Restart Your Dev Server

```bash npm run dev ```

5.3 Test the Audio Visualizer

1. Open http://localhost:3000
2. Make sure AIMP/Winamp is connected to Icecast and playing music
3. Click Play in your web app
4. The visualizer should now react to your actual music! 🎉

Create a sync script to update song information from Icecast.

Create scripts/sync-icecast.js:

```javascript const ICECAST_STATUS_URL = 'http://localhost:8000/status-json.xsl' const API_BASE_URL = 'http://localhost:3000/api/radio'

async function syncMetadata() { try { // Fetch Icecast status const response = await fetch(ICECAST_STATUS_URL) const data = await response.json()

// Find your mount point
const sources = Array.isArray(data.icestats.source) 
  ? data.icestats.source 
  : [data.icestats.source]

const myStream = sources.find(s => s.listenurl?.includes('/myradio'))

if (!myStream) {
  console.log('⚠️  Stream not found')
  return
}

// Parse metadata (format: "Artist - Title")
const title = myStream.title || 'Unknown'
const [artist, ...titleParts] = title.split(' - ')
const songTitle = titleParts.join(' - ') || title

// Update current track
await fetch(`${API_BASE_URL}/current`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: songTitle,
    artist: artist || 'Unknown Artist',
    album: myStream.server_description || '',
    duration: 0,
    currentTime: 0,
    isPlaying: true
  })
})

// Update listeners count
await fetch(`${API_BASE_URL}/listeners`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    count: myStream.listeners || 0
  })
})

// Add to history
await fetch(`${API_BASE_URL}/history`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: songTitle,
    artist: artist || 'Unknown Artist',
    timestamp: Date.now()
  })
})

console.log(`✅ Synced: ${artist} - ${songTitle} (${myStream.listeners} listeners)`)

} catch (error) { console.error('❌ Sync error:', error.message) } }

// Sync every 5 seconds setInterval(syncMetadata, 5000) syncMetadata()

console.log('🎵 Icecast metadata sync started...') ```

Run the sync script:

```bash node scripts/sync-icecast.js ```

Keep this running in a separate terminal while your radio is broadcasting.

7.1 Deploy to Vercel

```bash

git add . git commit -m "My personal radio" git push

```

7.2 Set Up Production Icecast

For production, you need a VPS (Virtual Private Server):

Recommended Providers:

• DigitalOcean ($6/month)
• Linode ($5/month)
• AWS Lightsail ($5/month)

On your VPS:

```bash

sudo apt-get update sudo apt-get install icecast2

sudo nano /etc/icecast2/icecast.xml

sudo systemctl start icecast2 sudo systemctl enable icecast2

sudo ufw allow 8000 ```

7.3 Update Your App

Update .env.local on Vercel: ```env NEXT_PUBLIC_ICECAST_URL=http://radio.yourdomain.com:8000/myradio ```

7.4 Connect AIMP/Winamp to Production

Change server from localhost to radio.yourdomain.com in your AIMP/Winamp plugin settings.

Use this to verify everything is working:

• Icecast server is running (http://localhost:8000 shows admin page)
• AIMP/Winamp is connected to Icecast (shows "Connected" in plugin)
• Music is playing in AIMP/Winamp
• Stream URL works in browser (http://localhost:8000/myradio plays audio)
• Web app is running (http://localhost:3000)
• Clicking Play in web app starts audio
• Audio visualizer bars move with the music (this confirms real connection!)
• Metadata sync script is running
• Song title/artist updates in web app
• Listener count updates

Problem: Bars are animated but don't react to music
Solution:

1. Check browser console for CORS errors
2. Verify NEXT_PUBLIC_ICECAST_URL is set correctly
3. Make sure Icecast has CORS headers (see Step 2)
4. Try clicking Play button (browsers require user interaction for audio)

Problem: Visualizer works but no sound
Solution:

1. Check browser volume
2. Check if stream URL works: http://localhost:8000/myradio
3. Verify AIMP/Winamp is connected and playing

Problem: Song info stuck on "Waiting for broadcast..."
Solution:

1. Check if sync script is running
2. Verify API endpoints are accessible
3. Check AIMP/Winamp is sending metadata (enable in plugin settings)

Problem: Browser console shows CORS errors
Solution: Add to icecast.xml: ```xml

All endpoints support real-time updates:

Returns currently playing song

Update current song (used by sync script)

Returns playlist

Returns connected listeners

Update listener count (used by sync script)

Returns last 20 songs played

Add song to history (used by sync script)

Returns radio statistics

Control playback (play/pause, next, previous)

Get recent reactions

Add a reaction to current song

Uses Web Audio API to analyze frequency data from your Icecast stream:

• Connects directly to your audio stream
• Analyzes 512 frequency bins in real-time
• Renders 256 bars that react to music
• Adapts colors to dark/light theme
• Fullscreen mode for immersive experience

How it works:

1. Creates AudioContext and AnalyserNode
2. Connects to your Icecast stream URL
3. Extracts frequency data 60 times per second
4. Renders bars on HTML5 canvas

Listeners can react to songs in real-time with emojis:

• 6 reaction types (heart, thumbs up, music, flame, star, zap)
• Floating animation when reacted
• Synced across all listeners
• Tracks reaction counts per song

• WebSockets for instant updates
• User authentication
• Live chat between listeners
• Song request queue
• Last.fm scrobbling
• Spotify integration
• Mobile apps
• Recording/podcast mode
• Scheduled broadcasts
• Multiple DJ support

MIT

Having issues? Open an issue on GitHub or check the troubleshooting section above.

You now have everything you need to run a real streaming radio! 🎉