+
š±āš
+
OPTIMAL ORIENTATION
+
For the best DJ experience, please rotate your device to landscape mode (sideways).
+
Both decks and the crossfader will be visible simultaneously.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Drop tracks here or click "Queue to A" in library
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Drop tracks here or click "Queue to B" in library
+
+
+
+
+
+
+
+
+
+
Library empty. Download some music!
';
+ return;
+ }
+ songs.forEach(t => {
+ const item = document.createElement('div');
+ item.className = 'track-row';
+
+ const trackName = document.createElement('span');
+ trackName.className = 'track-name';
+ trackName.textContent = t.title; // Safe text assignment
+
+ const loadActions = document.createElement('div');
+ loadActions.className = 'load-actions';
+
+ // LOAD buttons
+ const btnA = document.createElement('button');
+ btnA.className = 'load-btn btn-a';
+ btnA.textContent = 'LOAD A';
+ btnA.addEventListener('click', () => loadFromServer('A', t.file, t.title));
+
+ const btnB = document.createElement('button');
+ btnB.className = 'load-btn btn-b';
+ btnB.textContent = 'LOAD B';
+ btnB.addEventListener('click', () => loadFromServer('B', t.file, t.title));
+
+ // QUEUE buttons
+ const queueA = document.createElement('button');
+ queueA.className = 'load-btn queue-btn-a';
+ queueA.textContent = 'š Q-A';
+ queueA.title = 'Add to Queue A';
+ queueA.addEventListener('click', () => addToQueue('A', t.file, t.title));
+
+ const queueB = document.createElement('button');
+ queueB.className = 'load-btn queue-btn-b';
+ queueB.textContent = 'š Q-B';
+ queueB.title = 'Add to Queue B';
+ queueB.addEventListener('click', () => addToQueue('B', t.file, t.title));
+
+ loadActions.appendChild(btnA);
+ loadActions.appendChild(queueA);
+ loadActions.appendChild(btnB);
+ loadActions.appendChild(queueB);
+ item.appendChild(trackName);
+ item.appendChild(loadActions);
+
+ // Add data attribute for highlighting
+ item.dataset.file = t.file;
+
+ list.appendChild(item);
+ });
+
+ // Update highlighting after rendering
+ updateLibraryHighlighting();
+}
+
+// Update library highlighting to show which tracks are loaded
+function updateLibraryHighlighting() {
+ const trackRows = document.querySelectorAll('.track-row');
+
+ trackRows.forEach(row => {
+ const file = row.dataset.file;
+
+ // Remove all deck classes
+ row.classList.remove('loaded-deck-a', 'loaded-deck-b', 'loaded-both');
+
+ const onDeckA = decks.A.currentFile && decks.A.currentFile.includes(file);
+ const onDeckB = decks.B.currentFile && decks.B.currentFile.includes(file);
+
+ if (onDeckA && onDeckB) {
+ row.classList.add('loaded-both');
+ } else if (onDeckA) {
+ row.classList.add('loaded-deck-a');
+ } else if (onDeckB) {
+ row.classList.add('loaded-deck-b');
+ }
+ });
+}
+
+// Utility function no longer needed but kept for future use
+function escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+}
+
+function filterLibrary() {
+ const query = document.getElementById('lib-search').value.toLowerCase();
+ const filtered = allSongs.filter(s => s.title.toLowerCase().includes(query));
+ renderLibrary(filtered);
+}
+
+function refreshLibrary() {
+ fetchLibrary();
+}
+
+// YouTube Search Functions
+let youtubeSearchTimeout = null;
+
+function handleYouTubeSearch(query) {
+ // Debounce search - wait 300ms after user stops typing
+ clearTimeout(youtubeSearchTimeout);
+
+ if (!query || query.trim().length < 2) {
+ document.getElementById('youtube-results').innerHTML = '';
+ return;
+ }
+
+ youtubeSearchTimeout = setTimeout(() => {
+ searchYouTube(query.trim());
+ }, 300);
+}
+
+async function searchYouTube(query) {
+ const resultsDiv = document.getElementById('youtube-results');
+ resultsDiv.innerHTML = 'š Searching YouTube...
';
+
+ try {
+ const response = await fetch(`/search_youtube?q=${encodeURIComponent(query)}`);
+ const data = await response.json();
+
+ if (!data.success) {
+ resultsDiv.innerHTML = `ā Search failed. Check console.
';
+ }
+}
+
+function displayYouTubeResults(results) {
+ const resultsDiv = document.getElementById('youtube-results');
+
+ if (results.length === 0) {
+ resultsDiv.innerHTML = 'ā³ Downloading...
';
+
+ try {
+ const response = await fetch('/download', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ url: url, quality: '320' })
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ resultsDiv.innerHTML = 'ā
Downloaded! Refreshing library...
';
+ await fetchLibrary();
+ setTimeout(() => {
+ resultsDiv.innerHTML = originalContent;
+ }, 2000);
+ } else {
+ resultsDiv.innerHTML = `Downloading...
';
+ try {
+ const res = await fetch('/download', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ url: url, quality: qualitySelect.value })
+ });
+ const result = await res.json();
+ if (result.success) {
+ statusDiv.innerHTML = 'ā
Complete!';
+ fetchLibrary();
+ setTimeout(() => statusDiv.innerHTML = '', 3000);
+ } else {
+ statusDiv.innerHTML = 'ā Failed';
+ }
+ } catch (e) {
+ statusDiv.innerHTML = 'ā Error';
+ }
+}
+
+// Settings
+function toggleSettings() {
+ const p = document.getElementById('settings-panel');
+ p.classList.toggle('active');
+}
+
+// File Upload
+async function handleFileUpload(event) {
+ const files = event.target.files;
+ if (!files || files.length === 0) return;
+
+ console.log(`š Uploading ${files.length} file(s)...`);
+
+ for (let file of files) {
+ if (!file.type.match('audio/mpeg') && !file.name.endsWith('.mp3')) {
+ alert(`${file.name} is not an MP3 file`);
+ continue;
+ }
+
+ const formData = new FormData();
+ formData.append('file', file);
+
+ try {
+ const response = await fetch('/upload', {
+ method: 'POST',
+ body: formData
+ });
+
+ const result = await response.json();
+
+ if (result.success) {
+ console.log(`ā
Uploaded: ${file.name}`);
+ } else {
+ console.error(`ā Upload failed: ${result.error}`);
+ alert(`Failed to upload ${file.name}: ${result.error}`);
+ }
+ } catch (error) {
+ console.error(`ā Upload error: ${error}`);
+ alert(`Error uploading ${file.name}`);
+ }
+ }
+
+ // Refresh library
+ console.log('š Refreshing library...');
+ await loadLibrary();
+ alert(`ā
${files.length} file(s) uploaded successfully!`);
+
+ // Clear the input so the same file can be uploaded again if needed
+ event.target.value = '';
+}
+
+function toggleRepeat(id, val) { settings[`repeat${id}`] = val; }
+function toggleAutoMix(val) { settings.autoMix = val; }
+function toggleShuffle(val) { settings.shuffleMode = val; }
+function toggleQuantize(val) { settings.quantize = val; }
+function toggleAutoPlay(val) { settings.autoPlay = val; }
+
+function updateManualGlow(id, val) {
+ settings[`glow${id}`] = val;
+ if (val) {
+ document.body.classList.add(`playing-${id}`);
+ } else {
+ document.body.classList.remove(`playing-${id}`);
+ }
+}
+
+function updateGlowIntensity(val) {
+ settings.glowIntensity = parseInt(val);
+ const opacity = settings.glowIntensity / 100;
+ const spread = (settings.glowIntensity / 100) * 80;
+
+ // Dynamically update CSS variables for the glow
+ document.documentElement.style.setProperty('--glow-opacity', opacity);
+ document.documentElement.style.setProperty('--glow-spread', `${spread}px`);
+}
+
+// Dismiss landscape prompt
+function dismissLandscapePrompt() {
+ const prompt = document.getElementById('landscape-prompt');
+ if (prompt) {
+ prompt.classList.add('dismissed');
+ // Store preference in localStorage
+ localStorage.setItem('landscapePromptDismissed', 'true');
+ }
+}
+
+// Check if prompt was previously dismissed
+window.addEventListener('DOMContentLoaded', () => {
+ const wasDismissed = localStorage.getItem('landscapePromptDismissed');
+ if (wasDismissed === 'true') {
+ const prompt = document.getElementById('landscape-prompt');
+ if (prompt) prompt.classList.add('dismissed');
+ }
+
+ // Initialize glow intensity
+ updateGlowIntensity(settings.glowIntensity);
+ const glowAToggle = document.getElementById('glow-A');
+ if (glowAToggle) glowAToggle.checked = settings.glowA;
+ const glowBToggle = document.getElementById('glow-B');
+ if (glowBToggle) glowBToggle.checked = settings.glowB;
+ const intensitySlider = document.getElementById('glow-intensity');
+ if (intensitySlider) intensitySlider.value = settings.glowIntensity;
+
+ // Apply initial glow state
+ updateManualGlow('A', settings.glowA);
+ updateManualGlow('B', settings.glowB);
+
+ // Dual-Port Logic: Port 5001 is for Listeners, 5000 is for DJs
+ const isListenerPort = window.location.port === '5001';
+ const urlParams = new URLSearchParams(window.location.search);
+
+ if (isListenerPort || urlParams.get('listen') === 'true') {
+ initListenerMode();
+ }
+
+ if (!isListenerPort) {
+ // Set stream URL to the dedicated listener port (5001)
+ const streamUrl = `${window.location.protocol}//${window.location.hostname}:5001`;
+ const streamInput = document.getElementById('stream-url');
+ if (streamInput) streamInput.value = streamUrl;
+ }
+});
+
+// ========== LIVE STREAMING FUNCTIONALITY ==========
+
+let socket = null;
+let streamDestination = null;
+let streamProcessor = null;
+let isBroadcasting = false;
+let autoStartStream = false;
+let listenerAudioContext = null;
+let listenerGainNode = null;
+
+// Initialize SocketIO connection
+function initSocket() {
+ if (socket) return socket;
+
+ // Log connection details
+ const serverUrl = window.location.origin;
+ console.log(`š Initializing Socket.IO connection to: ${serverUrl}`);
+ console.log(` Protocol: ${window.location.protocol}`);
+ console.log(` Host: ${window.location.host}`);
+
+ socket = io({
+ transports: ['websocket'],
+ reconnection: true,
+ reconnectionAttempts: 10
+ });
+
+ socket.on('connect', () => {
+ console.log('ā
Connected to streaming server');
+ console.log(` Socket ID: ${socket.id}`);
+ console.log(` Transport: ${socket.io.engine.transport.name}`);
+ });
+
+ socket.on('connect_error', (error) => {
+ console.error('ā Connection error:', error.message);
+ console.error(' Make sure server is running on', serverUrl);
+ });
+
+ socket.on('disconnect', (reason) => {
+ console.log('ā Disconnected from streaming server');
+ console.log(` Reason: ${reason}`);
+ });
+
+ socket.on('listener_count', (data) => {
+ const el = document.getElementById('listener-count');
+ if (el) el.textContent = data.count;
+ });
+
+ socket.on('broadcast_started', () => {
+ console.log('šļø Broadcast started notification received');
+ });
+
+ socket.on('broadcast_stopped', () => {
+ console.log('š Broadcast stopped notification received');
+ });
+
+ socket.on('mixer_status', (data) => {
+ updateUIFromMixerStatus(data);
+ });
+
+ socket.on('deck_status', (data) => {
+ console.log(`š” Server: Deck ${data.deck_id} status update:`, data);
+ // This is handled by a single status update too, but helpful for immediate feedback
+ });
+
+ socket.on('error', (data) => {
+ console.error('š” Server error:', data.message);
+ alert(`SERVER ERROR: ${data.message}`);
+ });
+
+ return socket;
+}
+
+// Update DJ UI from server status
+function updateUIFromMixerStatus(status) {
+ if (!status) return;
+
+ ['A', 'B'].forEach(id => {
+ const deckStatus = id === 'A' ? status.deck_a : status.deck_b;
+ if (!deckStatus) return;
+
+ // Update position (only if not currently dragging the waveform)
+ const timeSinceSeek = Date.now() - (decks[id].lastSeekTime || 0);
+ if (timeSinceSeek < 1500) {
+ // Seek Protection: Ignore server updates for 1.5s after manual seek
+ return;
+ }
+
+ // Update playing state
+ decks[id].playing = deckStatus.playing;
+
+ // Update loaded track if changed
+ if (deckStatus.filename && (!decks[id].currentFile || decks[id].currentFile !== deckStatus.filename)) {
+ console.log(`š” Server synced: Deck ${id} is playing ${deckStatus.filename}`);
+ decks[id].currentFile = deckStatus.filename;
+ decks[id].duration = deckStatus.duration;
+
+ // Update UI elements for track title
+ const titleEl = document.getElementById(`display-${id}`);
+ if (titleEl) {
+ const name = deckStatus.filename.split('/').pop().replace(/\.[^/.]+$/, "");
+ titleEl.textContent = name;
+ }
+ }
+
+ // Sync playback rate for interpolation
+ const speedSlider = document.querySelector(`#deck-${id} .speed-slider`);
+ if (speedSlider) speedSlider.value = deckStatus.pitch;
+
+ // Update anchor for local interpolation
+ decks[id].lastAnchorPosition = deckStatus.position;
+ decks[id].lastAnchorTime = audioCtx ? audioCtx.currentTime : 0;
+
+ if (!decks[id].playing) {
+ decks[id].pausedAt = deckStatus.position;
+ }
+
+ // Forced UI update to snap to server reality
+ const currentPos = getCurrentPosition(id);
+ const progress = (currentPos / decks[id].duration) * 100;
+ const playhead = document.getElementById('playhead-' + id);
+ if (playhead) playhead.style.left = progress + '%';
+ const timer = document.getElementById('time-current-' + id);
+ if (timer) timer.textContent = formatTime(currentPos);
+ });
+
+ // Update crossfader if changed significantly
+ if (Math.abs(decks.crossfader - status.crossfader) > 1) {
+ // We'd update the UI slider here
+ }
+}
+
+// Toggle streaming panel
+function toggleStreamingPanel() {
+ const panel = document.getElementById('streaming-panel');
+ panel.classList.toggle('active');
+
+ // Initialize socket when panel is opened
+ if (panel.classList.contains('active') && !socket) {
+ initSocket();
+ }
+}
+
+// Toggle broadcast
+function toggleBroadcast() {
+ if (!audioCtx) {
+ alert('Please initialize the system first (click INITIALIZE SYSTEM)');
+ return;
+ }
+
+ if (!socket) initSocket();
+
+ if (isBroadcasting) {
+ stopBroadcast();
+ } else {
+ startBroadcast();
+ }
+}
+
+// Start broadcasting
+// Start broadcasting
+function startBroadcast() {
+ try {
+ console.log('šļø Starting broadcast...');
+
+ if (!audioCtx) {
+ alert('Please initialize the system first!');
+ return;
+ }
+
+ // Server-side audio mode
+ if (SERVER_SIDE_AUDIO) {
+ isBroadcasting = true;
+ document.getElementById('broadcast-btn').classList.add('active');
+ document.getElementById('broadcast-text').textContent = 'STOP BROADCAST';
+ document.getElementById('broadcast-status').textContent = 'š“ LIVE';
+ document.getElementById('broadcast-status').classList.add('live');
+
+ if (!socket) initSocket();
+ socket.emit('start_broadcast');
+ socket.emit('get_listener_count');
+
+ console.log('ā
Server-side broadcast started');
+ return;
+ }
+
+ // Browser-side audio mode (original code)
+ // Check if any audio is playing
+ const anyPlaying = decks.A.playing || decks.B.playing;
+ if (!anyPlaying) {
+ console.warn('ā ļø WARNING: No decks are currently playing! Start playing a track for audio to stream.');
+ }
+
+ // Create MediaStreamDestination to capture audio output
+ streamDestination = audioCtx.createMediaStreamDestination();
+
+ // IMPORTANT: Properly manage audio graph connections
+ // Disconnect from speakers first, then connect to stream AND speakers
+ // This prevents dual-connection instability
+ if (decks.A.crossfaderGain) {
+ try {
+ decks.A.crossfaderGain.disconnect();
+ } catch (e) {
+ console.warn('Deck A crossfader already disconnected');
+ }
+ decks.A.crossfaderGain.connect(streamDestination);
+ decks.A.crossfaderGain.connect(audioCtx.destination); // Re-add for local monitoring
+ console.log('ā
Deck A connected to stream + speakers');
+ }
+ if (decks.B.crossfaderGain) {
+ try {
+ decks.B.crossfaderGain.disconnect();
+ } catch (e) {
+ console.warn('Deck B crossfader already disconnected');
+ }
+ decks.B.crossfaderGain.connect(streamDestination);
+ decks.B.crossfaderGain.connect(audioCtx.destination); // Re-add for local monitoring
+ console.log('ā
Deck B connected to stream + speakers');
+ }
+
+ // Verify stream has audio tracks
+ const stream = streamDestination.stream;
+ console.log(`š Stream tracks: ${stream.getAudioTracks().length} audio tracks`);
+
+ if (stream.getAudioTracks().length === 0) {
+ throw new Error('No audio tracks in stream! Audio routing failed.');
+ }
+
+ // Get selected quality from dropdown
+ const qualitySelect = document.getElementById('stream-quality');
+ const selectedBitrate = parseInt(qualitySelect.value) * 1000; // Convert kbps to bps
+ console.log(`šļø Starting broadcast at ${qualitySelect.value}kbps`);
+
+ mediaRecorder = new MediaRecorder(stream, {
+ mimeType: 'audio/webm;codecs=opus',
+ audioBitsPerSecond: selectedBitrate
+ });
+
+ let chunkCount = 0;
+ let lastLogTime = Date.now();
+ let silenceWarningShown = false;
+
+ // Send audio chunks via SocketIO
+ mediaRecorder.ondataavailable = async (event) => {
+ if (event.data.size > 0 && isBroadcasting && socket) {
+ chunkCount++;
+
+ // Warn if chunks are too small (likely silence)
+ if (event.data.size < 100 && !silenceWarningShown) {
+ console.warn('ā ļø Audio chunks are very small - might be silence. Make sure audio is playing!');
+ silenceWarningShown = true;
+ }
+
+ // Convert blob to array buffer for transmission
+ const buffer = await event.data.arrayBuffer();
+ socket.emit('audio_chunk', buffer); // Send raw ArrayBuffer directly
+
+ // Log every second
+ const now = Date.now();
+ if (now - lastLogTime > 1000) {
+ console.log(`š” Broadcasting: ${chunkCount} chunks sent (${(event.data.size / 1024).toFixed(1)} KB/chunk)`);
+ lastLogTime = now;
+
+ // Reset silence warning
+ if (event.data.size > 100) {
+ silenceWarningShown = false;
+ }
+ }
+ } else {
+ // Debug why chunks aren't being sent
+ if (event.data.size === 0) {
+ console.warn('ā ļø Received empty audio chunk');
+ }
+ if (!isBroadcasting) {
+ console.warn('ā ļø Broadcasting flag is false');
+ }
+ if (!socket) {
+ console.warn('ā ļø Socket not connected');
+ }
+ }
+ };
+
+ mediaRecorder.onerror = (error) => {
+ console.error('ā MediaRecorder error:', error);
+ // Try to recover from error
+ if (isBroadcasting) {
+ console.log('š Attempting to recover from MediaRecorder error...');
+ setTimeout(() => {
+ if (isBroadcasting) {
+ restartBroadcast();
+ }
+ }, 2000);
+ }
+ };
+
+ mediaRecorder.onstart = () => {
+ console.log('ā
MediaRecorder started');
+ };
+
+ mediaRecorder.onstop = (event) => {
+ console.warn('ā ļø MediaRecorder stopped!');
+ console.log(` State: ${mediaRecorder.state}`);
+ console.log(` isBroadcasting flag: ${isBroadcasting}`);
+
+ // If we're supposed to be broadcasting but MediaRecorder stopped, restart it
+ if (isBroadcasting) {
+ console.error('ā MediaRecorder stopped unexpectedly while broadcasting!');
+ console.log('š Auto-recovery: Attempting to restart broadcast in 2 seconds...');
+
+ setTimeout(() => {
+ if (isBroadcasting) {
+ console.log('š Executing auto-recovery...');
+ restartBroadcast();
+ }
+ }, 2000);
+ }
+ };
+
+ mediaRecorder.onpause = (event) => {
+ console.warn('ā ļø MediaRecorder paused unexpectedly!');
+
+ // If we're broadcasting and MediaRecorder paused, resume it
+ if (isBroadcasting && mediaRecorder.state === 'paused') {
+ console.log('š Auto-resuming MediaRecorder...');
+ try {
+ mediaRecorder.resume();
+ console.log('ā
MediaRecorder resumed');
+ } catch (e) {
+ console.error('ā Failed to resume MediaRecorder:', e);
+ // If resume fails, try full restart
+ setTimeout(() => {
+ if (isBroadcasting) {
+ restartBroadcast();
+ }
+ }, 1000);
+ }
+ }
+ };
+
+ // 1000ms chunks: Dramatically reduces CPU interrupts on low-RAM machines
+ // Validate state before starting
+ if (mediaRecorder.state === 'inactive') {
+ mediaRecorder.start(1000);
+ streamProcessor = mediaRecorder;
+ console.log('ā
MediaRecorder started in state:', mediaRecorder.state);
+ } else {
+ console.error('ā Cannot start MediaRecorder - already in state:', mediaRecorder.state);
+ throw new Error(`MediaRecorder is already ${mediaRecorder.state}`);
+ }
+
+ // Update UI
+ isBroadcasting = true;
+ document.getElementById('broadcast-btn').classList.add('active');
+ document.getElementById('broadcast-text').textContent = 'STOP BROADCAST';
+ document.getElementById('broadcast-status').textContent = 'š“ LIVE';
+ document.getElementById('broadcast-status').classList.add('live');
+
+ // Notify server
+ if (!socket) initSocket();
+ socket.emit('start_broadcast');
+ socket.emit('get_listener_count');
+
+ console.log('ā
Broadcasting started successfully!');
+ console.log('š” TIP: Play a track on Deck A or B to stream audio');
+
+ // Monitor audio levels
+ setTimeout(() => {
+ if (chunkCount === 0) {
+ console.error('ā NO AUDIO CHUNKS after 2 seconds! Check:');
+ console.error(' 1. Is audio playing on either deck?');
+ console.error(' 2. Is volume turned up?');
+ console.error(' 3. Is crossfader in the middle?');
+ }
+ }, 2000);
+
+ } catch (error) {
+ console.error('ā Failed to start broadcast:', error);
+ alert('Failed to start broadcast: ' + error.message);
+ isBroadcasting = false;
+ }
+}
+
+// Stop broadcasting
+function stopBroadcast() {
+ console.log('š Stopping broadcast...');
+
+ if (SERVER_SIDE_AUDIO) {
+ isBroadcasting = false;
+ if (socket) {
+ socket.emit('stop_broadcast');
+ }
+ } else {
+ if (streamProcessor) {
+ streamProcessor.stop();
+ streamProcessor = null;
+ }
+
+ if (streamDestination) {
+ // Disconnect from stream destination and restore normal playback
+ if (decks.A.crossfaderGain) {
+ try {
+ decks.A.crossfaderGain.disconnect(streamDestination);
+ // Ensure connection to speakers is maintained
+ decks.A.crossfaderGain.disconnect();
+ decks.A.crossfaderGain.connect(audioCtx.destination);
+ } catch (e) {
+ console.warn('Error restoring Deck A audio:', e);
+ }
+ }
+ if (decks.B.crossfaderGain) {
+ try {
+ decks.B.crossfaderGain.disconnect(streamDestination);
+ // Ensure connection to speakers is maintained
+ decks.B.crossfaderGain.disconnect();
+ decks.B.crossfaderGain.connect(audioCtx.destination);
+ } catch (e) {
+ console.warn('Error restoring Deck B audio:', e);
+ }
+ }
+ streamDestination = null;
+ }
+ isBroadcasting = false;
+
+ // Notify server (browser-side mode also needs to tell server to stop relaying)
+ if (socket) {
+ socket.emit('stop_broadcast');
+ }
+ }
+
+ // Update UI
+ document.getElementById('broadcast-btn').classList.remove('active');
+ document.getElementById('broadcast-text').textContent = 'START BROADCAST';
+ document.getElementById('broadcast-status').textContent = 'Offline';
+ document.getElementById('broadcast-status').classList.remove('live');
+
+ console.log('ā
Broadcast stopped');
+}
+
+
+// Restart broadcasting (for auto-recovery)
+function restartBroadcast() {
+ console.log('š Restarting broadcast...');
+
+ // Clean up old MediaRecorder without changing UI state
+ if (streamProcessor) {
+ try {
+ streamProcessor.stop();
+ } catch (e) {
+ console.warn('Could not stop old MediaRecorder:', e);
+ }
+ streamProcessor = null;
+ }
+
+ // Clean up old stream destination
+ if (streamDestination) {
+ if (decks.A.crossfaderGain) {
+ try {
+ decks.A.crossfaderGain.disconnect(streamDestination);
+ decks.A.crossfaderGain.disconnect();
+ decks.A.crossfaderGain.connect(audioCtx.destination);
+ } catch (e) {
+ console.warn('Error cleaning up Deck A:', e);
+ }
+ }
+ if (decks.B.crossfaderGain) {
+ try {
+ decks.B.crossfaderGain.disconnect(streamDestination);
+ decks.B.crossfaderGain.disconnect();
+ decks.B.crossfaderGain.connect(audioCtx.destination);
+ } catch (e) {
+ console.warn('Error cleaning up Deck B:', e);
+ }
+ }
+ streamDestination = null;
+ }
+
+ // Preserve broadcasting state
+ const wasBroadcasting = isBroadcasting;
+ isBroadcasting = false; // Temporarily set to false so startBroadcast works
+
+ // Small delay to ensure cleanup completes
+ setTimeout(() => {
+ if (wasBroadcasting) {
+ startBroadcast();
+ console.log('ā
Broadcast restarted successfully');
+ }
+ }, 100);
+}
+
+// Copy stream URL to clipboard
+function copyStreamUrl() {
+ const urlInput = document.getElementById('stream-url');
+ urlInput.select();
+ urlInput.setSelectionRange(0, 99999); // For mobile
+
+ try {
+ document.execCommand('copy');
+ const btn = event.target;
+ const originalText = btn.textContent;
+ btn.textContent = 'ā';
+ setTimeout(() => {
+ btn.textContent = originalText;
+ }, 2000);
+ } catch (err) {
+ console.error('Failed to copy:', err);
+ }
+}
+
+// Toggle auto-start stream
+function toggleAutoStream(enabled) {
+ autoStartStream = enabled;
+ localStorage.setItem('autoStartStream', enabled);
+}
+
+// ========== LISTENER MODE ==========
+
+function initListenerMode() {
+ console.log('š§ Initializing listener mode (MediaSource Pipeline)...');
+
+ // UI Feedback for listener
+ const appContainer = document.querySelector('.app-container');
+ const settingsBtn = document.querySelector('.settings-btn');
+ const streamingBtn = document.querySelector('.streaming-btn');
+ if (appContainer) appContainer.style.display = 'none';
+ if (settingsBtn) settingsBtn.style.display = 'none';
+ if (streamingBtn) streamingBtn.style.display = 'none';
+
+ const startOverlay = document.getElementById('start-overlay');
+ if (startOverlay) startOverlay.style.display = 'none';
+
+ // Hide landscape prompt for listeners (not needed)
+ const landscapePrompt = document.getElementById('landscape-prompt');
+ if (landscapePrompt) landscapePrompt.style.display = 'none';
+
+ const listenerMode = document.getElementById('listener-mode');
+ if (listenerMode) listenerMode.style.display = 'flex';
+
+ // Add atmospheric glow for listeners
+ document.body.classList.add('listener-glow');
+ document.body.classList.add('listening-active'); // For global CSS targeting
+ updateGlowIntensity(settings.glowIntensity || 30);
+
+ // Setup Audio Context for volume/routing
+ listenerAudioContext = new (window.AudioContext || window.webkitAudioContext)();
+ listenerGainNode = listenerAudioContext.createGain();
+ listenerGainNode.gain.value = 0.8;
+ listenerGainNode.connect(listenerAudioContext.destination);
+
+ // Create a hidden audio element to handle the MediaSource
+ const audio = new Audio();
+ audio.autoplay = true;
+ audio.hidden = true;
+ document.body.appendChild(audio);
+
+ // Bridge Audio Element to AudioContext
+ const sourceNode = listenerAudioContext.createMediaElementSource(audio);
+ sourceNode.connect(listenerGainNode);
+
+ // Initialize MediaSource for streaming binary chunks
+ const mediaSource = new MediaSource();
+ audio.src = URL.createObjectURL(mediaSource);
+
+ let sourceBuffer = null;
+ let audioQueue = [];
+ let chunksReceived = 0;
+ let lastStatusUpdate = 0;
+
+ mediaSource.addEventListener('sourceopen', () => {
+ console.log('š¦ MediaSource opened');
+ try {
+ sourceBuffer = mediaSource.addSourceBuffer('audio/webm;codecs=opus');
+ sourceBuffer.mode = 'sequence';
+
+ // Request the startup header now that we are ready to receive it
+ console.log('š” Requesting stream header...');
+ socket.emit('request_header');
+
+ // Kick off first append if data is already in queue
+ if (audioQueue.length > 0 && !sourceBuffer.updating && mediaSource.readyState === 'open') {
+ sourceBuffer.appendBuffer(audioQueue.shift());
+ }
+
+ sourceBuffer.addEventListener('updateend', () => {
+ if (audioQueue.length > 0 && !sourceBuffer.updating) {
+ sourceBuffer.appendBuffer(audioQueue.shift());
+ }
+ });
+ } catch (e) {
+ console.error('ā Failed to add SourceBuffer:', e);
+ }
+ });
+
+ // Show enable audio button instead of attempting autoplay
+ const enableAudioBtn = document.getElementById('enable-audio-btn');
+ const statusEl = document.getElementById('connection-status');
+
+ if (enableAudioBtn) {
+ enableAudioBtn.style.display = 'flex';
+ }
+ if (statusEl) {
+ statusEl.textContent = 'šµ Click "Enable Audio" to start listening';
+ }
+
+ // Store audio element and context for later activation
+ window.listenerAudio = audio;
+ window.listenerMediaSource = mediaSource;
+
+ // Initialize socket and join
+ initSocket();
+ socket.emit('join_listener');
+
+ let hasHeader = false;
+
+ socket.on('audio_data', (data) => {
+ // We MUST have the header before we can do anything with broadcast chunks
+ const isHeaderDirect = data instanceof ArrayBuffer && data.byteLength > 1000; // Heuristic
+
+ hasHeader = true; // No header request needed for WebM relay
+
+ chunksReceived++;
+ audioQueue.push(data);
+
+ // JITTER BUFFER: Reduced to 1 segments (buffered) for WebM/Opus
+ const isHeader = false;
+
+ if (sourceBuffer && !sourceBuffer.updating && mediaSource.readyState === 'open') {
+ if (audioQueue.length >= 1) {
+ try {
+ const next = audioQueue.shift();
+ sourceBuffer.appendBuffer(next);
+
+ // Periodic cleanup of old buffer data to prevent memory bloat
+ // Keep the last 60 seconds of audio data
+ if (audio.buffered.length > 0 && !sourceBuffer.updating) {
+ const end = audio.buffered.end(audio.buffered.length - 1);
+ const start = audio.buffered.start(0);
+ if (end - start > 120) { // If buffer is > 2 mins
+ sourceBuffer.remove(0, end - 60);
+ }
+ }
+
+ // Reset error counter on success
+ if (window.sourceBufferErrorCount) window.sourceBufferErrorCount = 0;
+ } catch (e) {
+ console.error('Buffer append error:', e);
+ window.sourceBufferErrorCount = (window.sourceBufferErrorCount || 0) + 1;
+
+ if (window.sourceBufferErrorCount >= 5) {
+ console.error('ā Too many SourceBuffer errors - attempting recovery...');
+ const statusEl = document.getElementById('connection-status');
+ if (statusEl) statusEl.textContent = 'ā ļø Stream error - reconnecting...';
+ audioQueue = [];
+ chunksReceived = 0;
+ window.sourceBufferErrorCount = 0;
+ setTimeout(() => {
+ if (socket) socket.emit('request_header');
+ }, 1000);
+ }
+ }
+ }
+ }
+
+ // UI Update
+ const now = Date.now();
+ if (now - lastStatusUpdate > 1000) {
+ const statusEl = document.getElementById('connection-status');
+ if (statusEl) {
+ statusEl.textContent = `š¢ Connected - ${chunksReceived} chunks (${audioQueue.length} buffered)`;
+ }
+ lastStatusUpdate = now;
+ }
+ });
+
+ socket.on('broadcast_started', () => {
+ const nowPlayingEl = document.getElementById('listener-now-playing');
+ if (nowPlayingEl) nowPlayingEl.textContent = 'šµ Stream is live!';
+ // Reset MediaSource for fresh stream if needed
+ });
+
+ socket.on('stream_status', (data) => {
+ const nowPlayingEl = document.getElementById('listener-now-playing');
+ if (nowPlayingEl) {
+ nowPlayingEl.textContent = data.active ? 'šµ Stream is live!' : 'Stream offline - waiting for DJ...';
+ }
+ });
+
+ socket.on('broadcast_stopped', () => {
+ const nowPlayingEl = document.getElementById('listener-now-playing');
+ if (nowPlayingEl) nowPlayingEl.textContent = 'Stream ended';
+ chunksReceived = 0;
+ audioQueue = [];
+ });
+
+ socket.on('connect', () => {
+ const statusEl = document.getElementById('connection-status');
+ if (statusEl) statusEl.textContent = 'š¢ Connected';
+ });
+
+ socket.on('disconnect', () => {
+ const statusEl = document.getElementById('connection-status');
+ if (statusEl) statusEl.textContent = 'š“ Disconnected';
+ });
+}
+
+// Enable audio for listener mode (called when user clicks the button)
+async function enableListenerAudio() {
+ console.log('š§ Enabling audio via user gesture...');
+
+ const enableAudioBtn = document.getElementById('enable-audio-btn');
+ const statusEl = document.getElementById('connection-status');
+ const audioText = enableAudioBtn ? enableAudioBtn.querySelector('.audio-text') : null;
+
+ if (audioText) audioText.textContent = 'INITIALIZING...';
+
+ try {
+ // 1. Create AudioContext if it somehow doesn't exist
+ if (!listenerAudioContext) {
+ listenerAudioContext = new (window.AudioContext || window.webkitAudioContext)();
+ }
+
+ // 2. Resume audio context (CRITICAL for Chrome/Safari)
+ if (listenerAudioContext.state === 'suspended') {
+ await listenerAudioContext.resume();
+ console.log('ā
Audio context resumed');
+ }
+
+ // 3. Kickstart the hidden audio element
+ if (window.listenerAudio) {
+ // Unmute just in case
+ window.listenerAudio.muted = false;
+ window.listenerAudio.volume = settings.volume || 0.8;
+
+ // Attempt playback
+ await window.listenerAudio.play();
+ console.log('ā
Audio playback started successfully');
+ }
+
+ // 4. Hide the button and update status
+ if (enableAudioBtn) {
+ enableAudioBtn.style.opacity = '0';
+ setTimeout(() => {
+ enableAudioBtn.style.display = 'none';
+ }, 300);
+ }
+
+ if (statusEl) {
+ statusEl.textContent = 'š¢ Audio Active - Enjoy the stream';
+ statusEl.classList.add('glow-text');
+ }
+
+ } catch (error) {
+ console.error('ā Failed to enable audio:', error);
+ const stashedStatus = document.getElementById('connection-status');
+ const stashedBtn = document.getElementById('enable-audio-btn');
+ const audioText = stashedBtn ? stashedBtn.querySelector('.audio-text') : null;
+
+ if (audioText) audioText.textContent = 'RETRY ENABLE';
+ if (stashedStatus) {
+ stashedStatus.textContent = 'ā ļø Browser blocked audio. Please click again.';
+ }
+ }
+}
+
+function setListenerVolume(value) {
+ if (listenerGainNode) {
+ listenerGainNode.gain.value = value / 100;
+ }
+}
+
+// Load auto-start preference
+window.addEventListener('load', () => {
+ const autoStart = localStorage.getItem('autoStartStream');
+ if (autoStart === 'true') {
+ document.getElementById('auto-start-stream').checked = true;
+ autoStartStream = true;
+ }
+});
+
+// Monitoring
+function monitorTrackEnd() {
+ setInterval(() => {
+ if (!audioCtx) return; // Safety check
+
+ // In server-side mode, poll for status from server
+ if (SERVER_SIDE_AUDIO && socket && socket.connected) {
+ socket.emit('get_mixer_status');
+ }
+
+ ['A', 'B'].forEach(id => {
+ if (decks[id].playing && decks[id].localBuffer && !decks[id].loading) {
+ const playbackRate = decks[id].localSource ? decks[id].localSource.playbackRate.value : 1.0;
+ const realElapsed = audioCtx.currentTime - decks[id].lastAnchorTime;
+ const current = decks[id].lastAnchorPosition + (realElapsed * playbackRate);
+ const remaining = decks[id].duration - current;
+
+ // If end reached (with 0.5s buffer for safety)
+ if (remaining <= 0.5) {
+ // Don't pause during broadcast - let the track end naturally
+ if (isBroadcasting) {
+ console.log(`šļø Track ending during broadcast on Deck ${id} - continuing stream`);
+ if (settings[`repeat${id}`]) {
+ console.log(`š Repeating track on Deck ${id}`);
+ seekTo(id, 0);
+ }
+ // Skip pause/stop during broadcast to maintain stream
+ return;
+ }
+
+ if (settings[`repeat${id}`]) {
+ // Full song repeat
+ console.log(`š Repeating track on Deck ${id}`);
+ seekTo(id, 0);
+ } else if (settings.autoPlay) {
+ // Prevent race condition
+ decks[id].loading = true;
+ pauseDeck(id);
+
+ // Check queue for auto-play
+ if (queues[id] && queues[id].length > 0) {
+ console.log(`š Auto-play: Loading next from Queue ${id}...`);
+ const next = queues[id].shift();
+ renderQueue(id); // Update queue UI
+
+ loadFromServer(id, next.file, next.title).then(() => {
+ decks[id].loading = false;
+ playDeck(id);
+ }).catch(() => {
+ decks[id].loading = false;
+ });
+ } else {
+ // No queue - just stop
+ console.log(`ā¹ļø Track ended, queue empty - stopping playback`);
+ decks[id].loading = false;
+ pauseDeck(id);
+ decks[id].pausedAt = 0;
+ }
+ } else {
+ // Just stop if no auto-play
+ pauseDeck(id);
+ decks[id].pausedAt = 0;
+ }
+ }
+ }
+ });
+ }, 500); // Check every 0.5s
+}
+monitorTrackEnd();
+// Reset Deck to Default Settings
+function resetDeck(id) {
+ console.log(`š Resetting Deck ${id} to defaults...`);
+
+ if (!audioCtx) {
+ console.warn('AudioContext not initialized');
+ return;
+ }
+
+ // Reset EQ to neutral (0dB gain)
+ if (decks[id].filters) {
+ if (decks[id].filters.low) decks[id].filters.low.gain.value = 0;
+ if (decks[id].filters.mid) decks[id].filters.mid.gain.value = 0;
+ if (decks[id].filters.high) decks[id].filters.high.gain.value = 0;
+
+ // Reset UI sliders
+ const eqSliders = document.querySelectorAll(`#deck-${id} .eq-band input`);
+ eqSliders.forEach(slider => slider.value = 0); // 0 = neutral for -20/20 range
+ }
+
+ // Reset filters to fully open
+ if (decks[id].filters.lp) decks[id].filters.lp.frequency.value = 22050;
+ if (decks[id].filters.hp) decks[id].filters.hp.frequency.value = 0;
+
+ // Reset UI filter sliders
+ const lpSlider = document.querySelector(`#deck-${id} .filter-lp`);
+ const hpSlider = document.querySelector(`#deck-${id} .filter-hp`);
+ if (lpSlider) lpSlider.value = 100;
+ if (hpSlider) hpSlider.value = 0;
+
+ // Reset volume to 80%
+ if (decks[id].volumeGain) {
+ decks[id].volumeGain.gain.value = 0.8;
+ }
+ const volumeSlider = document.querySelector(`#deck-${id} .volume-fader`);
+ if (volumeSlider) volumeSlider.value = 80;
+
+ // Reset pitch/speed to 1.0 (100%)
+ const speedSlider = document.querySelector(`#deck-${id} .speed-slider`);
+ if (speedSlider) {
+ speedSlider.value = 1.0;
+ // Use changeSpeed function to properly update playback rate
+ changeSpeed(id, 1.0);
+ }
+
+ // Clear all hot cues
+ decks[id].cues = {};
+ const cueBtns = document.querySelectorAll(`#deck-${id} .cue-btn`);
+ cueBtns.forEach(btn => {
+ btn.classList.remove('cue-set');
+ btn.style.animation = '';
+ });
+
+ // Clear loops
+ decks[id].loopStart = null;
+ decks[id].loopEnd = null;
+ decks[id].loopActive = false;
+
+ const loopBtns = document.querySelectorAll(`#deck-${id} .loop-controls button`);
+ loopBtns.forEach(btn => {
+ btn.style.background = '';
+ btn.style.borderColor = '';
+ });
+
+ // Redraw waveform to clear cue/loop markers
+ drawWaveform(id);
+
+ console.log(`ā
Deck ${id} reset complete!`);
+
+ // Visual feedback
+ const resetBtn = document.querySelector(`#deck-${id} .reset-btn`);
+ if (resetBtn) {
+ resetBtn.style.transform = 'rotate(360deg)';
+ resetBtn.style.transition = 'transform 0.5s ease';
+ setTimeout(() => {
+ resetBtn.style.transform = '';
+ }, 500);
+ }
+}
+// ==========================================
+// QUEUE SYSTEM
+// ==========================================
+
+// Add track to queue
+function addToQueue(deckId, file, title) {
+ queues[deckId].push({ file, title });
+ renderQueue(deckId);
+ console.log(`š Added "${title}" to Queue ${deckId} (${queues[deckId].length} tracks)`);
+
+ // Sync with server if in server-side mode
+ if (SERVER_SIDE_AUDIO && socket) {
+ socket.emit('audio_sync_queue', { deck: deckId, tracks: queues[deckId] });
+ }
+}
+
+// Remove track from queue
+function removeFromQueue(deckId, index) {
+ const removed = queues[deckId].splice(index, 1)[0];
+ renderQueue(deckId);
+ console.log(`šļø Removed "${removed.title}" from Queue ${deckId}`);
+
+ // Sync with server if in server-side mode
+ if (SERVER_SIDE_AUDIO && socket) {
+ socket.emit('audio_sync_queue', { deck: deckId, tracks: queues[deckId] });
+ }
+}
+
+// Clear entire queue
+function clearQueue(deckId) {
+ const count = queues[deckId].length;
+ queues[deckId] = [];
+ renderQueue(deckId);
+ console.log(`šļø Cleared Queue ${deckId} (${count} tracks removed)`);
+
+ // Sync with server if in server-side mode
+ if (SERVER_SIDE_AUDIO && socket) {
+ socket.emit('audio_sync_queue', { deck: deckId, tracks: queues[deckId] });
+ }
+}
+
+// Load next track from queue
+function loadNextFromQueue(deckId) {
+ if (queues[deckId].length === 0) {
+ console.log(`š Queue ${deckId} is empty`);
+ return false;
+ }
+
+ const next = queues[deckId].shift();
+ console.log(`š Loading next from Queue ${deckId}: "${next.title}"`);
+ loadFromServer(deckId, next.file, next.title);
+ renderQueue(deckId);
+
+ // Sync with server if in server-side mode (after shift)
+ if (SERVER_SIDE_AUDIO && socket) {
+ socket.emit('audio_sync_queue', { deck: deckId, tracks: queues[deckId] });
+ }
+
+ return true;
+}
+
+// Render queue UI
+function renderQueue(deckId) {
+ const queueList = document.getElementById(`queue-list-${deckId}`);
+ if (!queueList) return;
+
+ if (queues[deckId].length === 0) {
+ queueList.innerHTML = '
+
Click on a key to reassign it. Press ESC to cancel.
+
+
+
+
+
+
+