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');
-}
-
-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.
-
-
-
-
-
-
-