479 lines
16 KiB
JavaScript
479 lines
16 KiB
JavaScript
// ========== TechDJ Listener ==========
|
|
// Standalone listener script — no DJ panel code loaded.
|
|
|
|
'use strict';
|
|
|
|
// --- State ---
|
|
let socket = null;
|
|
let listenerAudioContext = null;
|
|
let listenerGainNode = null;
|
|
let listenerAnalyserNode = null;
|
|
let listenerMediaElementSourceNode = null;
|
|
let listenerVuMeterRunning = false;
|
|
|
|
// --- Helpers ---
|
|
|
|
function getMp3FallbackUrl() {
|
|
// Use same-origin so this works behind reverse proxies (e.g. Cloudflare)
|
|
return `${window.location.origin}/stream.mp3`;
|
|
}
|
|
|
|
function updateGlowIntensity(val) {
|
|
const opacity = parseInt(val, 10) / 100;
|
|
const spread = (parseInt(val, 10) / 100) * 80;
|
|
document.documentElement.style.setProperty('--glow-opacity', opacity);
|
|
document.documentElement.style.setProperty('--glow-spread', `${spread}px`);
|
|
}
|
|
|
|
// --- VU Meter ---
|
|
|
|
function startListenerVUMeter() {
|
|
if (listenerVuMeterRunning) return;
|
|
listenerVuMeterRunning = true;
|
|
|
|
const draw = () => {
|
|
if (!listenerVuMeterRunning) return;
|
|
requestAnimationFrame(draw);
|
|
|
|
const canvas = document.getElementById('viz-listener');
|
|
if (!canvas || !listenerAnalyserNode) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
if (!ctx) return;
|
|
|
|
// Keep canvas sized correctly for DPI
|
|
const dpr = window.devicePixelRatio || 1;
|
|
const rect = canvas.getBoundingClientRect();
|
|
const targetW = Math.max(1, Math.floor(rect.width * dpr));
|
|
const targetH = Math.max(1, Math.floor(rect.height * dpr));
|
|
if (canvas.width !== targetW || canvas.height !== targetH) {
|
|
canvas.width = targetW;
|
|
canvas.height = targetH;
|
|
}
|
|
|
|
const analyser = listenerAnalyserNode;
|
|
const bufferLength = analyser.frequencyBinCount;
|
|
const dataArray = new Uint8Array(bufferLength);
|
|
analyser.getByteFrequencyData(dataArray);
|
|
|
|
const width = canvas.width;
|
|
const height = canvas.height;
|
|
const barCount = 32;
|
|
const barWidth = width / barCount;
|
|
|
|
ctx.fillStyle = '#0a0a12';
|
|
ctx.fillRect(0, 0, width, height);
|
|
|
|
// Magenta hue (matches Deck B styling)
|
|
const hue = 280;
|
|
for (let i = 0; i < barCount; i++) {
|
|
const freqIndex = Math.floor(Math.pow(i / barCount, 1.5) * bufferLength);
|
|
const value = (dataArray[freqIndex] || 0) / 255;
|
|
const barHeight = value * height;
|
|
|
|
const lightness = 30 + (value * 50);
|
|
const gradient = ctx.createLinearGradient(0, height, 0, height - barHeight);
|
|
gradient.addColorStop(0, `hsl(${hue}, 100%, ${lightness}%)`);
|
|
gradient.addColorStop(1, `hsl(${hue}, 100%, ${Math.min(lightness + 20, 80)}%)`);
|
|
|
|
ctx.fillStyle = gradient;
|
|
ctx.fillRect(i * barWidth, height - barHeight, barWidth - 2, barHeight);
|
|
}
|
|
};
|
|
|
|
draw();
|
|
}
|
|
|
|
// --- Socket.IO ---
|
|
|
|
function initSocket() {
|
|
if (socket) return socket;
|
|
|
|
const serverUrl = window.location.origin;
|
|
console.log(`[LISTENER] Initializing Socket.IO connection to: ${serverUrl}`);
|
|
|
|
socket = io(serverUrl, {
|
|
transports: ['websocket', 'polling'],
|
|
reconnection: true,
|
|
reconnectionAttempts: Infinity,
|
|
reconnectionDelay: 1000,
|
|
reconnectionDelayMax: 10000
|
|
});
|
|
|
|
socket.on('connect', () => {
|
|
console.log('[OK] Connected to streaming server');
|
|
socket.emit('get_listener_count');
|
|
});
|
|
|
|
socket.on('connect_error', (error) => {
|
|
console.error('[ERROR] Connection error:', error.message);
|
|
});
|
|
|
|
socket.on('disconnect', (reason) => {
|
|
console.log(`[ERROR] Disconnected: ${reason}`);
|
|
});
|
|
|
|
socket.on('listener_count', (data) => {
|
|
const el = document.getElementById('listener-count');
|
|
if (el) el.textContent = data.count;
|
|
});
|
|
|
|
return socket;
|
|
}
|
|
|
|
// --- Listener Mode Init ---
|
|
|
|
function initListenerMode() {
|
|
console.log('[LISTENER] Initializing listener mode (MP3 stream)...');
|
|
|
|
// Apply glow
|
|
updateGlowIntensity(30);
|
|
|
|
// Clean up old audio element if it exists (e.g. page refresh)
|
|
if (window.listenerAudio) {
|
|
console.log('[CLEAN] Cleaning up old audio element');
|
|
try {
|
|
window.listenerAudio.pause();
|
|
if (window.listenerAudio.src) {
|
|
URL.revokeObjectURL(window.listenerAudio.src);
|
|
}
|
|
window.listenerAudio.removeAttribute('src');
|
|
window.listenerAudio.remove();
|
|
} catch (e) {
|
|
console.warn('Error cleaning up old audio:', e);
|
|
}
|
|
|
|
if (listenerMediaElementSourceNode) {
|
|
try { listenerMediaElementSourceNode.disconnect(); } catch (_) { }
|
|
listenerMediaElementSourceNode = null;
|
|
}
|
|
if (listenerAnalyserNode) {
|
|
try { listenerAnalyserNode.disconnect(); } catch (_) { }
|
|
listenerAnalyserNode = null;
|
|
}
|
|
if (listenerGainNode) {
|
|
try { listenerGainNode.disconnect(); } catch (_) { }
|
|
listenerGainNode = null;
|
|
}
|
|
|
|
window.listenerAudio = null;
|
|
window.listenerMediaSource = null;
|
|
window.listenerAudioEnabled = false;
|
|
}
|
|
|
|
// Create fresh audio element
|
|
const audio = document.createElement('audio');
|
|
audio.autoplay = false;
|
|
audio.muted = false;
|
|
audio.controls = false;
|
|
audio.playsInline = true;
|
|
audio.setAttribute('playsinline', '');
|
|
audio.style.display = 'none';
|
|
audio.crossOrigin = 'anonymous';
|
|
document.body.appendChild(audio);
|
|
console.log('[NEW] Created fresh audio element for listener');
|
|
|
|
// --- Stall Watchdog ---
|
|
let lastCheckedTime = 0;
|
|
let stallCount = 0;
|
|
let watchdogInterval = null;
|
|
|
|
const stopWatchdog = () => {
|
|
if (watchdogInterval) {
|
|
clearInterval(watchdogInterval);
|
|
watchdogInterval = null;
|
|
}
|
|
};
|
|
|
|
const startWatchdog = () => {
|
|
stopWatchdog();
|
|
lastCheckedTime = audio.currentTime;
|
|
stallCount = 0;
|
|
|
|
watchdogInterval = setInterval(() => {
|
|
if (!window.listenerAudioEnabled || audio.paused) return;
|
|
|
|
if (audio.currentTime === lastCheckedTime && audio.currentTime > 0) {
|
|
stallCount++;
|
|
console.warn(`[WARN] Stream stall detected (${stallCount}/3)...`);
|
|
|
|
if (stallCount >= 3) {
|
|
console.error('[ALERT] Stream stalled. Force reconnecting...');
|
|
reconnectStream();
|
|
stallCount = 0;
|
|
}
|
|
} else {
|
|
stallCount = 0;
|
|
}
|
|
lastCheckedTime = audio.currentTime;
|
|
}, 2000);
|
|
};
|
|
|
|
const reconnectStream = () => {
|
|
if (!window.listenerAudioEnabled || !window.listenerAudio) return;
|
|
|
|
console.log('[RECONNECT] Reconnecting stream...');
|
|
const statusEl = document.getElementById('connection-status');
|
|
if (statusEl) {
|
|
statusEl.textContent = '[WAIT] Connection weak - Reconnecting...';
|
|
statusEl.classList.remove('glow-text');
|
|
}
|
|
|
|
const wasPaused = window.listenerAudio.paused;
|
|
window.listenerAudio.src = getMp3FallbackUrl() + '?t=' + Date.now();
|
|
window.listenerAudio.load();
|
|
|
|
if (!wasPaused) {
|
|
window.listenerAudio.play()
|
|
.then(() => {
|
|
if (statusEl) {
|
|
statusEl.textContent = '[ACTIVE] Reconnected';
|
|
statusEl.classList.add('glow-text');
|
|
}
|
|
startListenerVUMeter();
|
|
})
|
|
.catch(e => console.warn('Reconnect play failed:', e));
|
|
}
|
|
};
|
|
|
|
// Set MP3 stream source
|
|
audio.src = getMp3FallbackUrl();
|
|
audio.load();
|
|
console.log(`[STREAM] Listener source set to MP3 stream: ${audio.src}`);
|
|
|
|
// Auto-reconnect on stream error
|
|
audio.onerror = () => {
|
|
if (!window.listenerAudioEnabled) return;
|
|
console.error('[ERROR] Audio stream error!');
|
|
reconnectStream();
|
|
};
|
|
|
|
audio.onplay = () => {
|
|
console.log('[PLAY] Stream playing');
|
|
startWatchdog();
|
|
const statusEl = document.getElementById('connection-status');
|
|
if (statusEl) statusEl.classList.add('glow-text');
|
|
};
|
|
|
|
audio.onpause = () => {
|
|
console.log('[PAUSE] Stream paused');
|
|
stopWatchdog();
|
|
};
|
|
|
|
// Show enable audio button
|
|
const enableAudioBtn = document.getElementById('enable-audio-btn');
|
|
const statusEl = document.getElementById('connection-status');
|
|
|
|
if (enableAudioBtn) {
|
|
enableAudioBtn.style.display = 'flex';
|
|
}
|
|
if (statusEl) {
|
|
statusEl.textContent = '[INFO] Click "Enable Audio" to start listening (MP3)';
|
|
}
|
|
|
|
// Store for later activation
|
|
window.listenerAudio = audio;
|
|
window.listenerMediaSource = null;
|
|
window.listenerAudioEnabled = false;
|
|
|
|
// Initialise socket and join
|
|
initSocket();
|
|
socket.emit('join_listener');
|
|
|
|
// --- Socket event handlers ---
|
|
|
|
socket.on('broadcast_started', () => {
|
|
const nowPlayingEl = document.getElementById('listener-now-playing');
|
|
if (nowPlayingEl) nowPlayingEl.textContent = 'Stream is live!';
|
|
|
|
if (window.listenerAudio) {
|
|
console.log('[BROADCAST] Broadcast started: Refreshing audio stream...');
|
|
const wasPlaying = !window.listenerAudio.paused;
|
|
window.listenerAudio.src = getMp3FallbackUrl();
|
|
window.listenerAudio.load();
|
|
if (wasPlaying || window.listenerAudioEnabled) {
|
|
window.listenerAudio.play().catch(e => console.warn('Auto-play after refresh blocked:', e));
|
|
}
|
|
}
|
|
});
|
|
|
|
socket.on('stream_status', (data) => {
|
|
const nowPlayingEl = document.getElementById('listener-now-playing');
|
|
if (nowPlayingEl) {
|
|
if (data.active) {
|
|
const status = data.remote_relay ? 'Remote stream is live!' : 'DJ stream is live!';
|
|
nowPlayingEl.textContent = status;
|
|
} else {
|
|
nowPlayingEl.textContent = 'Stream offline - waiting for DJ...';
|
|
}
|
|
}
|
|
});
|
|
|
|
socket.on('broadcast_stopped', () => {
|
|
const nowPlayingEl = document.getElementById('listener-now-playing');
|
|
if (nowPlayingEl) nowPlayingEl.textContent = 'Stream ended';
|
|
});
|
|
|
|
socket.on('connect', () => {
|
|
const statusEl = document.getElementById('connection-status');
|
|
if (statusEl && window.listenerAudioEnabled) {
|
|
statusEl.textContent = '[ACTIVE] Connected';
|
|
}
|
|
socket.emit('join_listener');
|
|
});
|
|
|
|
socket.on('disconnect', () => {
|
|
const statusEl = document.getElementById('connection-status');
|
|
if (statusEl) statusEl.textContent = '[OFFLINE] Disconnected';
|
|
});
|
|
}
|
|
|
|
// --- Enable Audio (user gesture required) ---
|
|
|
|
async function enableListenerAudio() {
|
|
console.log('[LISTENER] 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 needed
|
|
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('[OK] Audio context resumed');
|
|
}
|
|
|
|
// 3. Bridge Audio Element to AudioContext
|
|
if (window.listenerAudio) {
|
|
try {
|
|
if (!listenerGainNode) {
|
|
listenerGainNode = listenerAudioContext.createGain();
|
|
listenerGainNode.gain.value = 0.8;
|
|
listenerGainNode.connect(listenerAudioContext.destination);
|
|
}
|
|
|
|
if (!listenerAnalyserNode) {
|
|
listenerAnalyserNode = listenerAudioContext.createAnalyser();
|
|
listenerAnalyserNode.fftSize = 256;
|
|
}
|
|
|
|
if (!listenerMediaElementSourceNode) {
|
|
listenerMediaElementSourceNode = listenerAudioContext.createMediaElementSource(window.listenerAudio);
|
|
}
|
|
|
|
// Clean single connection chain: media -> analyser -> gain -> destination
|
|
try { listenerMediaElementSourceNode.disconnect(); } catch (_) { }
|
|
try { listenerAnalyserNode.disconnect(); } catch (_) { }
|
|
|
|
listenerMediaElementSourceNode.connect(listenerAnalyserNode);
|
|
listenerAnalyserNode.connect(listenerGainNode);
|
|
|
|
window.listenerAudio._connectedToContext = true;
|
|
console.log('[OK] Connected audio element to AudioContext (with analyser)');
|
|
|
|
startListenerVUMeter();
|
|
} catch (e) {
|
|
console.warn('Could not connect to AudioContext:', e.message);
|
|
}
|
|
}
|
|
|
|
// 4. Prepare and start audio playback
|
|
if (window.listenerAudio) {
|
|
window.listenerAudio.muted = false;
|
|
window.listenerAudio.volume = 1.0;
|
|
|
|
const volEl = document.getElementById('listener-volume');
|
|
const volValue = volEl ? parseInt(volEl.value, 10) : 80;
|
|
setListenerVolume(Number.isFinite(volValue) ? volValue : 80);
|
|
|
|
const hasBufferedData = () => {
|
|
return window.listenerAudio.buffered && window.listenerAudio.buffered.length > 0;
|
|
};
|
|
|
|
window.listenerAudioEnabled = true;
|
|
|
|
if (audioText) audioText.textContent = 'STARTING...';
|
|
console.log('[PLAY] Attempting to play audio...');
|
|
|
|
const playTimeout = setTimeout(() => {
|
|
if (!hasBufferedData()) {
|
|
console.warn('[WARN] Audio play is taking a long time (buffering)...');
|
|
if (audioText) audioText.textContent = 'STILL BUFFERING...';
|
|
window.listenerAudio.load();
|
|
}
|
|
}, 8000);
|
|
|
|
const playPromise = window.listenerAudio.play();
|
|
|
|
if (!hasBufferedData() && audioText) {
|
|
audioText.textContent = 'BUFFERING...';
|
|
}
|
|
|
|
try {
|
|
await playPromise;
|
|
clearTimeout(playTimeout);
|
|
console.log('[OK] Audio playback started successfully');
|
|
} catch (e) {
|
|
clearTimeout(playTimeout);
|
|
throw e;
|
|
}
|
|
}
|
|
|
|
// 5. Hide the button and update status
|
|
if (enableAudioBtn) {
|
|
enableAudioBtn.style.opacity = '0';
|
|
setTimeout(() => {
|
|
enableAudioBtn.style.display = 'none';
|
|
}, 300);
|
|
}
|
|
|
|
if (statusEl) {
|
|
statusEl.textContent = '[ACTIVE] Audio Active - Enjoy the stream';
|
|
statusEl.classList.add('glow-text');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('[ERROR] Failed to enable audio:', error);
|
|
const stashedBtn = document.getElementById('enable-audio-btn');
|
|
const stashedStatus = document.getElementById('connection-status');
|
|
const aText = stashedBtn ? stashedBtn.querySelector('.audio-text') : null;
|
|
|
|
if (aText) aText.textContent = 'RETRY ENABLE';
|
|
if (stashedStatus) {
|
|
let errorMsg = error.name + ': ' + error.message;
|
|
if (error.name === 'NotAllowedError') {
|
|
errorMsg = 'Browser blocked audio (NotAllowedError). Check permissions.';
|
|
} else if (error.name === 'NotSupportedError') {
|
|
errorMsg = 'MP3 stream not supported or unavailable (NotSupportedError).';
|
|
}
|
|
stashedStatus.textContent = errorMsg;
|
|
|
|
if (error.name === 'NotSupportedError') {
|
|
stashedStatus.textContent = 'MP3 stream failed. Is ffmpeg installed on the server?';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Volume ---
|
|
|
|
function setListenerVolume(value) {
|
|
if (listenerGainNode) {
|
|
listenerGainNode.gain.value = value / 100;
|
|
}
|
|
}
|
|
|
|
// --- Boot ---
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initListenerMode();
|
|
});
|