Building SETHaoke26 with Claude AI

🚀 Project Overview

SETHaoke26 is a comprehensive, production-grade karaoke management system built with Claude AI to power professional streaming sessions. Featuring a 73,000+ song library with intelligent queue management, MIDI backing tracks, sound effects, and seamless OBS streaming integration, this system transforms how karaoke is managed and performed live.

⚡ Built with Claude AI
This entire system was architected and implemented using Claude AI, reducing development time and creating a clean, maintainable codebase that blends PHP backend power with modern frontend interactivity.

73,039

Total Songs in Library

13,777

Artists Catalogued

3,663

Lines of Production Code

🛠 Technology Stack

SETHaoke26 leverages a modern tech stack optimized for performance and reliability:

PHP 7.4+

MySQL

jQuery

JSON API

HTML5

CSS3

JavaScript

OBS Bridge

Architecture Highlights

PDO MySQL — Type-safe parameterized queries preventing SQL injection
AJAX Layer — Real-time interactions (delete, queue, mark played)
RESTful API — JSON responses for all data operations
File Streaming — Direct MP3/CDG serving for playback
CDG.js — Karaoke graphics synchronization
OBS Integration — HTML overlays for streaming displays

📊 Core Features

1. Song Library Interface

Browse and manage your entire collection with powerful search, filtering by artist, and quick play/queue actions:

Main Song Library: 73,039 songs with instant search, favorites, CDG indicators, and queue management

2. Singer Queue Management

Real-time queue management for coordinating tonight's karaoke rotation. Add singers, reorder queue, mark songs complete, and sync to OBS overlay:

Singer Queue: Manage rotation, track CDG status, and coordinate with streaming overlay

3. MIDI File Management

Direct MIDI file support for backing tracks and musical arrangements. Scan, organize, and play MIDI files seamlessly integrated with the main library.

4. Sound Effects Library

Categorized sound effects for transitions, alerts, and streaming enhancement. Quick-access buttons for live show operations.

5. Play Logging & Analytics

Track every song played with CSV logging (play_log.csv). Monitor play counts, artist popularity, and build performance analytics.

6. OBS Streaming Integration

Custom HTML overlays for OBS Studio including multi-platform alert system and audience counters for real-time engagement tracking.

💻 Technical Deep Dive

Database Schema

Clean, normalized MySQL structure with dynamic column management:

-- Songs table with flexible attributes
CREATE TABLE songs (
  id INT PRIMARY KEY AUTO_INCREMENT,
  artist VARCHAR(255),
  title VARCHAR(255),
  mp3_path VARCHAR(500),
  cdg_path VARCHAR(500),
  source VARCHAR(100),
  favorite TINYINT DEFAULT 0,
  active TINYINT DEFAULT 1,
  play_count INT DEFAULT 0
);
  

API Architecture (api.php)

RESTful API handling song deletion, artist removal, play tracking, and queue management:

// AJAX API endpoint for real-time interactions
$action = $_GET['action'] ?? '';

if ($action === 'delete_song') {
  // Remove song and linked CDG/MP3 files
  $pdo->prepare("DELETE FROM songs WHERE id=?")->execute([$id]);
}

if ($action === 'played') {
  // Increment play count, log to CSV
  $pdo->prepare("UPDATE songs SET play_count=play_count+1")->execute([$id]);
  // Write to play_log.csv for analytics
}
  

Frontend Interactivity (jQuery)

Smooth user experience with jQuery-powered AJAX calls, no page reloads:

// jQuery AJAX for delete without refresh
$('.delete-btn').click(function() {
  var songId = $(this).data('id');
  $.ajax({
    url: 'api.php?action=delete_song&id=' + songId,
    type: 'GET',
    success: function() {
      // Remove from DOM
      location.reload(); // Soft refresh
    }
  });
});
  

CDG Graphics (cdg.js)

JavaScript implementation for karaoke graphics synchronization, displaying lyrics and backgrounds in real-time with audio sync.

OBS Bridge

HTML overlays (obs_multi_alert_system.html, obs_overlay.html) embedded directly in OBS as browser sources for seamless streaming integration.

📈 Performance Metrics

25+

PHP Module Files

315

Lines in api.php

424

Lines in index.php

The system is optimized for speed with database indexing on artist/title, AJAX pagination limiting results to 50 items per page, and file system caching for CDG graphics.

🎯 Why Claude AI?

Claude AI made this project possible. Instead of months of solo development, we leveraged Claude's understanding of database architecture, API design, and JavaScript interactivity to build a cohesive system in days. The result is clean, maintainable code that blends:

Robust PHP/MySQL backend with proper parameterization
Modern jQuery frontend with real-time AJAX
RESTful JSON API design
Streaming platform integration (OBS)
Production-ready error handling and logging

Claude understood the full context of karaoke system requirements and produced code that handles edge cases, manages file systems safely, and provides an intuitive UX for live performance scenarios.

📺 OBS Streaming Overlay

One of the most powerful features of SETHaoke26 is its seamless OBS Studio integration. The system includes a purpose-built HTML overlay that displays real-time information directly on your stream, keeping your audience engaged and informed.

The Now Playing Overlay

A clean, professional browser source overlay that displays the current song status. The overlay features:

Live Status Display — Shows "Now Playing", "Loading", or current song info
Artist & Title — Full song information with singer attribution
Chat Commands — Displays !sr command for song requests
Responsive Design — Adapts to any stream resolution (720p, 1080p, 4K)
Beautiful Gradient UI — Professional light-blue aesthetic with smooth animations

OBS Overlay: "Now Playing — SETHaoke" with song request command (!sr) visible to chat

Integration with OBS Studio

Setting up the overlay in OBS is straightforward:

Open OBS Studio
Click "+" in Sources → Browser
Point to: /sethaoke26/obs_overlay.html
Set Resolution: 1920x1080 (or your stream size)
Enable Browser source refresh
Position overlay on your scene (corner recommended)
  

Real-Time Song Updates

The overlay includes JavaScript that can connect to your sethaoke26 backend to display live data:

// Fetch current track from your system
fetch('/sethaoke26/logs/current_track.json')
  .then(r => r.json())
  .then(data => {
    // Update overlay with:
    // - Artist name
    // - Song title
    // - Singer/performer name
    // - CDG status indicator
  });
  

Multi-Platform Streaming

The OBS overlay system also includes the obs_multi_alert_system.html file, a comprehensive alert system that:

Multi-Platform Support — Twitch, Kick, YouTube, and custom webhooks
Real-Time Notifications — Follows, subscriptions, donations, raids
Customizable Alerts — Sound effects, animations, and text overlays
Viewer Counter — Live audience size display
Engagement Tracking — Monitor chat activity and metrics

Why This Matters for Karaoke

For live karaoke streaming, the overlay serves critical functions:

Clarity — Viewers instantly know whose turn it is and what's playing
Engagement — The !sr command drives audience participation and song requests
Professionalism — Branded overlays elevate production value
Analytics — Track which songs get requested vs. performed
Accessibility — Closed captions and text-based information for all viewers

HTML & CSS Architecture

The overlay is built with clean, lightweight HTML and CSS for optimal performance:

.overlay-container {
  background: linear-gradient(135deg, #8ec5fc 0%, #b8d7f8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.now-playing-box {
  background: linear-gradient(135deg, #7ab8f5 0%, #9fd1ff 100%);
  padding: 40px 50px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}

/* Smooth animations for state changes */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.loading { animation: pulse 1.5s ease-in-out infinite; }
  

Future Enhancements

The overlay system is designed to be extensible. Potential features include:

Leaderboard of most-sung artists
Countdown timer to next performance
Singer profile cards with photo/social handles
Integration with Discord bot for moderation
Custom animations and transitions

🚀 What's Next?

SETHaoke26 is actively maintained and ready for streaming. Potential enhancements include:

Web-based remote queue management for audience requests
Discord bot integration for Twitch/Kick chat commands
Playlist scheduling and show templates
Advanced analytics dashboard
Mobile companion app for singers

SETHaoke26 — Powering professional karaoke streams on Twitch, Kick, and beyond.

Built with Claude AI | Made by Seth @ SolarBlu.net

Post Views: 23