Neural Quantum — Infinite Audio Visualizer
Neural Quantum
Click to begin — infinite audio visualization
▶
1-6: modes · ←→: switch mode · A: auto-rotate · F: fullscreen · R: randomize · ↑↓: chaos · Esc: info
![]()
🔊
00:00
overlay.addEventListener('click', () => { overlay.classList.add('hidden'); init(); });
console.log('Neural Quantum engine ready');
// ═════════════════════════════════════════════════════════════════════
// ENHANCED FEATURES — Bottom Bar, Audio Panel, Output, Stream
// ═════════════════════════════════════════════════════════════════════
let barMode = 'full';
const barEl = document.getElementById('bottom-bar');
const barTrackName = document.getElementById('bar-track-name');
const barArtistName = document.getElementById('bar-artist-name');
const barAlbumArt = document.getElementById('bar-album-art');
const barTimerCurrent = document.getElementById('bar-timer-current');
const barTimerDuration = document.getElementById('bar-timer-duration');
const barProgressFill = document.getElementById('bar-progress-fill');
const barUpNext = document.getElementById('bar-upnext-track');
const barSource = document.getElementById('bar-source');
let outputDevices = [], currentOutputDevice = '';
async function enumerateOutputs() {
const all = await navigator.mediaDevices.enumerateDevices();
outputDevices = all.filter(d => d.kind === 'audiooutput');
return outputDevices;
}
async function setAudioOutput(deviceId) {
if (!audioCtx || !audioCtx.setSinkId) return false;
try { await audioCtx.setSinkId(deviceId); currentOutputDevice = deviceId; return true; }
catch(e) { return false; }
}
let mediaRecorder = null, recordedChunks = [], streamTimer = null, streamStartTime = 0;
function startRecording() {
if (mediaRecorder) return;
const s = canvas.captureStream(30);
recordedChunks = [];
const mt = MediaRecorder.isTypeSupported('video/webm;codecs=vp9') ? 'video/webm;codecs=vp9' : 'video/webm;codecs=vp8';
mediaRecorder = new MediaRecorder(s, { mimeType: mt, videoBitsPerSecond: 8000000 });
mediaRecorder.ondataavailable = e => { if (e.data.size > 0) recordedChunks.push(e.data); };
mediaRecorder.onstop = () => { s.getTracks().forEach(t => t.stop()); clearInterval(streamTimer); document.getElementById('btn-download-recording').classList.remove('hidden'); };
mediaRecorder.start(100);
streamStartTime = Date.now();
streamTimer = setInterval(() => {
const sec = Math.floor((Date.now() - streamStartTime) / 1000);
document.getElementById('record-timer').textContent = `${String(Math.floor(sec/60)).padStart(2,'0')}:${String(sec%60).padStart(2,'0')}`;
}, 1000);
document.getElementById('btn-record-start').classList.add('hidden');
document.getElementById('btn-record-stop').classList.remove('hidden');
document.getElementById('record-timer').classList.remove('hidden');
}
function stopRecording() {
if (mediaRecorder && mediaRecorder.state === 'recording') mediaRecorder.stop();
mediaRecorder = null;
document.getElementById('btn-record-start').classList.remove('hidden');
document.getElementById('btn-record-stop').classList.add('hidden');
document.getElementById('record-timer').classList.add('hidden');
}
function downloadRecording() {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `neural-quantum-${Date.now()}.webm`;
a.click();
document.getElementById('btn-download-recording').classList.add('hidden');
}
function takeScreenshot() {
const a = document.createElement('a');
a.href = canvas.toDataURL('image/png');
a.download = `neural-quantum-${Date.now()}.png`;
a.click();
}
const audioPanel = document.getElementById('audio-panel');
async function refreshAudioSources() {
const list = document.getElementById('audio-source-list');
const inputs = await navigator.mediaDevices.enumerateDevices();
const mics = inputs.filter(d => d.kind === 'audioinput');
let html = '🔊Built-in Oscillator✓
';
for (const m of mics) html += `🎤${m.label || 'Microphone'}
`;
html += `🔉System Audio
`;
html += `📁Audio File
`;
html += `🔗Stream URL
`;
html += `🟢Spotify
`;
list.innerHTML = html;
}
async function refreshAudioOutputs() {
const list = document.getElementById('audio-output-list');
const devices = await enumerateOutputs();
if (!audioCtx || !audioCtx.setSinkId) {
list.innerHTML = 'Output selection requires Chrome/Edge.
';
return;
}
list.innerHTML = devices.map(d => {
const isActive = d.deviceId === currentOutputDevice || (!currentOutputDevice && d.deviceId === 'default');
return `${d.deviceId === 'default' ? '🔈' : '🔊'}${d.label || 'Device'}${isActive ? '✓' : ''}
`;
}).join('');
}
// Wire up
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('bar-btn-audio').addEventListener('click', () => { audioPanel.classList.toggle('hidden'); refreshAudioSources(); refreshAudioOutputs(); });
document.getElementById('bar-btn-scenes').addEventListener('click', randomizeParams);
document.getElementById('bar-btn-record').addEventListener('click', () => { if (mediaRecorder && mediaRecorder.state === 'recording') stopRecording(); else startRecording(); });
document.getElementById('bar-btn-collapse').addEventListener('click', () => {
const modes = ['full','compact','hidden'];
barMode = modes[(modes.indexOf(barMode)+1)%3];
barEl.style.transform = barMode === 'hidden' ? 'translateY(100%)' : '';
document.querySelectorAll('.bar-center, .bar-right').forEach(el => el.style.display = barMode === 'full' ? '' : 'none');
});
document.getElementById('bar-btn-play').addEventListener('click', () => { if (spotifyPlayer && spotifyDeviceId) spotifyPlayer.togglePlay(); else if (spotifyToken) initSpotifyPlayer(); else initSpotifyLogin(); });
document.getElementById('bar-btn-prev').addEventListener('click', () => { if (spotifyPlayer) spotifyPlayer.previous(); });
document.getElementById('bar-btn-next').addEventListener('click', () => { if (spotifyPlayer) spotifyPlayer.next(); });
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
tab.classList.add('active');
const tgt = tab.getAttribute('data-tab');
document.getElementById('audio-source-list').classList.toggle('hidden', tgt !== 'sources');
document.getElementById('audio-output-list').classList.toggle('hidden', tgt !== 'output');
document.getElementById('stream-controls').classList.toggle('hidden', tgt !== 'stream');
if (tgt === 'output') refreshAudioOutputs();
});
});
document.getElementById('btn-close-audio').addEventListener('click', () => audioPanel.classList.add('hidden'));
document.getElementById('audio-source-list').addEventListener('click', async (e) => {
const item = e.target.closest('.audio-source-item');
if (!item) return;
const type = item.getAttribute('data-type');
if (type === 'oscillator') { sto