🎧 LIVE SAFETY DEMO - Website Documentation

A real-time ESP32 audio streaming and GPS tracking web application, ready for Netlify deployment.

📋 Project Structure

website/
├── index.html          # Main HTML file
├── styles.css          # Styling (green terminal theme)
├── script.js           # WebSocket and audio handling
├── netlify.toml        # Netlify deployment config
└── README.md           # This file

🚀 Quick Start

Option 1: Deploy to Netlify (Recommended)

1. Create a GitHub Repository

   • Go to github.com/new
   • Create a new repo named musick-website
   • Don't initialize with README

2. Push Your Website

   cd e:\musick\website
   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/YOUR-USERNAME/musick-website.git
   git push -u origin main

3. Deploy on Netlify

   • Go to netlify.com
   • Click "New site from Git"
   • Connect to GitHub and select your repo
   • Default settings work fine
   • Click "Deploy site"
   • Your site will be live at https://your-site-name.netlify.app

Option 2: Local Testing

1. Python Server (if you have Python)

   cd e:\musick\website
   python -m http.server 8000
   # Open http://localhost:8000

2. Node.js Server

   cd e:\musick\website
   npx http-server

3. VS Code Live Server

   • Install "Live Server" extension
   • Right-click index.html → "Open with Live Server"

🔌 ESP32 Configuration

Update ESP32 Code

Your ESP32 needs to be accessible from the website. Modify your code:

1. Update HTML Endpoint (in your ESP32 code)

Remove or modify the embedded HTML since you're using an external website now.

2. Enable GPS Data Broadcasting (Add to your ESP32)

void broadcastGPSData() {
  if (gpsFix) {
    String gpsJson = "{\"type\":\"gps\",\"lat\":" + String(gpsLat, 6) + 
                     ",\"lng\":" + String(gpsLng, 6) + 
                     ",\"sats\":" + String(gpsSats) + 
                     ",\"fix\":true}";
    ws.broadcastTXT(gpsJson);
  }
}

3. Add GPS Broadcasting to Loop

void loop() {
  server.handleClient();
  ws.loop();
  updateGPS();
  streamMic();

  static unsigned long t = 0;
  if (millis() - t > 3000) {
    t = millis();
    broadcastGPSData();  // Add this line
    
    if (gpsFix) {
      Serial.printf("📍 GPS: %.6f , %.6f | Sats: %d\n", gpsLat, gpsLng, gpsSats);
    } else {
      Serial.println("📡 Waiting GPS lock...");
    }
  }
}

4. Update WebSocket Event Handler

void wsEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t len) {
  if (type == WStype_TEXT) {
    String cmd = (char*)payload;

    if (cmd == "start") {
      streamAudio = true;
      Serial.println("🔊 LIVE AUDIO STARTED");
    }

    if (cmd == "stop") {
      streamAudio = false;
      Serial.println("⏹ AUDIO STOPPED");
    }

    if (cmd == "get-gps") {
      broadcastGPSData();
    }
  }
}

🎯 Website Features

🔗 Connection Settings

• Enter ESP32 IP address
• Customize WebSocket port (default: 81)
• Connect/Disconnect controls
• Real-time status indicator

🎤 Audio Control

• Start/Stop streaming
• Live audio visualizer (frequency display)
• Volume control (0-100%)
• Real-time waveform animation

📍 GPS Data Display

• Latitude/Longitude (6 decimal places)
• Number of satellites
• GPS fix status
• Direct link to Google Maps

📋 System Logs

• Timestamped event logging
• Color-coded messages (info, success, error, warning)
• Clear logs button
• Auto-scrolling

🌐 Network Setup

Same Network (Local)

1. ESP32 and your computer/phone on same WiFi
2. Find ESP32 IP: Serial.println(WiFi.localIP()); in code
3. Enter IP in website (e.g., 192.168.1.100)

Different Network (Remote)

1. Use a VPN or port forwarding
2. Or use a reverse proxy service (ngrok, cloudflare tunnel)

Using ngrok for remote access:

# On your ESP32 computer:
ngrok tcp 81
# Copy the public address and use on website

🛠️ Browser Compatibility

• ✅ Chrome/Edge (latest)
• ✅ Firefox (latest)
• ✅ Safari (iOS 14+)
• ⚠️ HTTP only works on localhost (no HTTPS limitation on same network)

📱 Mobile Usage

1. Deploy to Netlify (HTTPS)
2. Make sure ESP32 and phone are on same WiFi
3. Enter ESP32 local IP
4. Works on all modern smartphones

🔐 Security Considerations

⚠️ For Production:

• Add authentication to WebSocket
• Use HTTPS with proper SSL certificates
• Implement CORS restrictions
• Add rate limiting to ESP32
• Encrypt sensitive data

Development version is for local/private use.

🐛 Troubleshooting

"Failed to connect"

• Check ESP32 is powered and connected to WiFi
• Verify IP address is correct
• Ensure port 81 is not blocked by firewall
• Check Serial output on ESP32 for errors

"No audio detected"

• Verify microphone is connected
• Check I2S pins match your setup
• Increase gain if audio is too quiet
• Look for "🎤 MIC READY" in ESP32 serial

"GPS not updating"

• Wait 30-60 seconds for GPS lock
• Check GPS module connection
• Verify GPS serial port (default GPIO 16/17)
• Check "📡 GPS STARTED" in serial output

"Website loads but won't connect"

• Check browser console for errors (F12)
• Verify WebSocket port (default: 81)
• Check firewall settings
• Try disabling VPN/proxy

📊 Performance Tips

• Close unnecessary browser tabs
• Use Chrome for best performance
• Reduce audio quality if bandwidth limited
• Disable visualizer if CPU-bound

🚀 Netlify Deployment Tips

1. Auto Deploy on Push

   • Push to GitHub, Netlify auto-deploys
   • No additional configuration needed

2. Custom Domain

   • Add domain in Netlify settings
   • Free SSL certificate included

3. Analytics

   • Netlify provides free analytics
   • Check "Analytics" tab in dashboard

4. Environment Variables

   • Add in "Site settings" → "Build & deploy" → "Environment"

📝 File Sizes

• index.html: ~8KB
• styles.css: ~10KB
• script.js: ~12KB
• Total: ~30KB (very fast load)

🎨 Customization

Change Theme Colors

Edit styles.css, search for #00ff00 and replace with your color:

• Green terminal: #00ff00
• Blue: #0066ff
• Purple: #cc00ff

Modify UI Layout

Edit index.html to add/remove panels in .main-content

Add More Controls

Edit script.js to send different commands to ESP32

🤝 Contributing

Improvements welcome! Fork and submit pull requests.

📄 License

MIT License - Use freely, modify, and distribute.

📧 Support

For issues with:

• Website: Check browser console (F12)
• ESP32: Check Serial Monitor output
• Netlify: Check deployment logs in dashboard

✅ Deployment Checklist

• Files created in website/ folder
• ESP32 code updated with GPS broadcasting
• GitHub repo created and files pushed
• Netlify connected to GitHub
• Site deployed successfully
• ESP32 IP entered in website
• Audio connects and plays
• GPS data displays

---

Built for ESP32 | Ready for Netlify | Made with ❤️