Live 3D Audio File Visualizer

Select audio file Volume Sensitivity

Drop an audio file or use the picker above.

html, body { height: 100%; margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: #0b0f1a; color: #ddd; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #ui { position: absolute; left: 12px; top: 12px; z-index: 10; display: flex; gap: 8px; align-items: center; background: rgba(10, 14, 24, 0.6); padding: 8px; border-radius: 8px; backdrop-filter: blur(6px); } #ui label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; } .file-label input[type="file"] { display: none; } #overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(255,255,255,0.12); font-size: 26px; pointer-events: none; z-index: 5; text-align: center; } canvas { display: block; } button { background: linear-gradient(180deg,#2a3244,#17202a); border: 1px solid rgba(255,255,255,0.04); color: #ddd; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; } button:disabled { opacity: 0.45; cursor: default; } input[type="range"] { width: 120px; accent-color: #6ad; } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { createAudioFromFile } from './audio.js'; import { createVisualizer } from './viz.js'; // UI const fileInput = document.getElementById('audio-file'); const playBtn = document.getElementById('play-btn'); const pauseBtn = document.getElementById('pause-btn'); const volumeEl = document.getElementById('volume'); const sensitivityEl = document.getElementById('sensitivity'); const overlay = document.getElementById('overlay'); // Canvas / Renderer setup inside viz const container = document.body; // Create Three.js visualizer const viz = createVisualizer(container); let audioInstance = null; function enableButtons(enabled) { playBtn.disabled = !enabled; pauseBtn.disabled = !enabled; } // Handle file selection fileInput.addEventListener('change', async (ev) => { const file = ev.target.files && ev.target.files[0]; if (!file) return; overlay.style.display = 'none'; if (audioInstance) { audioInstance.dispose(); audioInstance = null; } audioInstance = await createAudioFromFile(file); // Hook analyser into viz viz.setAnalyser(audioInstance.analyser, parseFloat(sensitivityEl.value)); enableButtons(true); }); // Drag & drop window.addEventListener('dragover', (e) => { e.preventDefault(); }); window.addEventListener('drop', async (e) => { e.preventDefault(); const f = e.dataTransfer.files && e.dataTransfer.files[0]; if (!f) return; fileInput.files = e.dataTransfer.files; const evt = new Event('change'); fileInput.dispatchEvent(evt); }); playBtn.addEventListener('click', async () => { if (!audioInstance) return; await audioInstance.resume(); audioInstance.play(); viz.playing = true; }); pauseBtn.addEventListener('click', () => { if (!audioInstance) return; audioInstance.pause(); viz.playing = false; }); volumeEl.addEventListener('input', () => { if (!audioInstance) return; audioInstance.setVolume(parseFloat(volumeEl.value)); }); sensitivityEl.addEventListener('input', () => { viz.setSensitivity(parseFloat(sensitivityEl.value)); }); // Start animation loop in viz (it manages its own RAF) viz.start(); // Clean up on unload window.addEventListener('beforeunload', () => { if (audioInstance) audioInstance.dispose(); viz.dispose(); }); // audio.js // Handles creating an AudioContext and an AnalyserNode from a local file import * as THREE from 'three'; export async function createAudioFromFile(file) { const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const audioEl = document.createElement('audio'); audioEl.controls = false; audioEl.src = URL.createObjectURL(file); audioEl.crossOrigin = "anonymous"; audioEl.loop = false; // Create nodes const sourceNode = audioCtx.createMediaElementSource(audioEl); const gainNode = audioCtx.createGain(); const analyser = audioCtx.createAnalyser(); // Configure analyser analyser.fftSize = 2048; analyser.smoothingTimeConstant = 0.85; // Connect nodes: source -> gain -> analyser -> destination sourceNode.connect(gainNode); gainNode.connect(analyser); analyser.connect(audioCtx.destination); gainNode.gain.value = 1.0; // Expose methods const freqData = new Uint8Array(analyser.frequencyBinCount); async function resume() { if (audioCtx.state === 'suspended') { await audioCtx.resume(); } } function play() { // Playing via audio element audioEl.play(); } function pause() { audioEl.pause(); } function setVolume(v) { gainNode.gain.value = v; } function getFrequencyData() { analyser.getByteFrequencyData(freqData); return freqData; } function dispose() { try { audioEl.pause(); audioEl.src = ''; URL.revokeObjectURL(audioEl.src); } catch (e) {} try { analyser.disconnect(); gainNode.disconnect(); sourceNode.disconnect(); // close context to free resources (optional) if (typeof audioCtx.close === 'function') audioCtx.close(); } catch (e) {} } return { audioCtx, audioEl, analyser, resume, play, pause, setVolume, getFrequencyData, dispose }; } import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; export function createVisualizer(container) { // Basic renderer const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; container.appendChild(renderer.domElement); const scene = new THREE.Scene(); scene.background = new THREE.Color(0x071025); const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000); camera.position.set(0, 12, 28); const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.08; controls.minDistance = 6; controls.maxDistance = 100; controls.autoRotate = false; // Lights const ambient = new THREE.AmbientLight(0xffffff, 0.35); scene.add(ambient); const keyLight = new THREE.DirectionalLight(0xddeeff, 0.8); keyLight.position.set(5, 12, 8); keyLight.castShadow = true; scene.add(keyLight); const rim = new THREE.PointLight(0xffd7b5, 0.8, 80); rim.position.set(-10, 8, -10); scene.add(rim); // Floor const floorGeo = new THREE.PlaneGeometry(200, 200); const floorMat = new THREE.MeshStandardMaterial({ color: 0x041225, roughness: 0.9, metalness: 0.0 }); const floor = new THREE.Mesh(floorGeo, floorMat); floor.rotation.x = -Math.PI / 2; floor.position.y = -0.01; floor.receiveShadow = true; scene.add(floor); // Bars const BAR_COUNT = 128; const bars = []; const maxRadius = 10; for (let i = 0; i < BAR_COUNT; i++) { const geom = new THREE.BoxGeometry(0.35, 1, 0.9); const mat = new THREE.MeshStandardMaterial({ color: new THREE.Color().setHSL(i / BAR_COUNT, 0.85, 0.55), emissive: 0x002633, roughness: 0.25, metalness: 0.2 }); const mesh = new THREE.Mesh(geom, mat); mesh.castShadow = false; mesh.receiveShadow = false; const angle = (i / BAR_COUNT) * Math.PI * 2; const radius = 6 + Math.sin(i * 0.1) * 0.6; mesh.position.x = Math.cos(angle) * radius; mesh.position.z = Math.sin(angle) * radius; mesh.position.y = 0.5; mesh.lookAt(0, 0.5, 0); scene.add(mesh); bars.push(mesh); } // Central sphere pulse const sphereGeo = new THREE.IcosahedronGeometry(2.4, 3); const sphereMat = new THREE.MeshStandardMaterial({ color: 0x66ccff, emissive: 0x002244, roughness: 0.2, metalness: 0.7, transparent: true, opacity: 0.95 }); const center = new THREE.Mesh(sphereGeo, sphereMat); center.position.y = 2.2; scene.add(center); // analyser integration let analyser = null; let freqData = null; let sensitivity = 1.6; let playing = false; function setAnalyser(a, sens = 1.6) { analyser = a; sensitivity = sens; freqData = new Uint8Array(analyser.frequencyBinCount); } function setSensitivity(s) { sensitivity = s; } function setPlaying(p) { playing = !!p; } // animation loop let rafId = null; const clock = new THREE.Clock(); function animate() { rafId = requestAnimationFrame(animate); const dt = Math.min(0.05, clock.getDelta()); // Get frequency data if (analyser && freqData) { analyser.getByteFrequencyData(freqData); // Reduce to BAR_COUNT bins from freqData length const bins = BAR_COUNT; const step = Math.floor(freqData.length / bins); for (let i = 0; i < bins; i++) { let sum = 0; for (let j = 0; j < step; j++) { sum += freqData[i * step + j] || 0; } const avg = sum / step; const h = Math.max(0.002, (avg / 255) * sensitivity * 12); const bar = bars[i]; // Smooth scaling const targetY = Math.max(0.2, h); bar.scale.y += (targetY - bar.scale.y) * 0.18; bar.position.y = bar.scale.y * 0.5; // Emissive intensity based on height bar.material.emissiveIntensity = 0.5 + (bar.scale.y / 6); // Hue shift slightly const hue = (i / BAR_COUNT) * 0.9 + (bar.scale.y / 20); bar.material.color.setHSL(hue % 1, 0.85, 0.5); } // center pulse from low frequencies (sum of lower bins) let lowSum = 0; const lowCount = Math.floor(freqData.length * 0.07); for (let i = 0; i < lowCount; i++) lowSum += freqData[i] || 0; const lowAvg = lowSum / Math.max(1, lowCount); const sphereScale = 1 + (lowAvg / 255) * sensitivity * 1.6; center.scale.x += (sphereScale - center.scale.x) * 0.12; center.scale.y += (sphereScale - center.scale.y) * 0.12; center.scale.z += (sphereScale - center.scale.z) * 0.12; center.material.emissiveIntensity = 0.35 + (lowAvg / 255) * 1.6; } else { // Idle subtle animation const t = performance.now() * 0.0005; bars.forEach((bar, i) => { const idle = 0.8 + Math.sin(t * 2 + i * 0.08) * 0.12; bar.scale.y += (idle - bar.scale.y) * 0.05; bar.position.y = bar.scale.y * 0.5; }); const idleS = 1 + Math.sin(performance.now() * 0.001) * 0.03; center.scale.lerp(new THREE.Vector3(idleS, idleS, idleS), 0.05); } controls.update(); renderer.render(scene, camera); } function start() { if (!rafId) animate(); } function stop() { if (rafId) { cancelAnimationFrame(rafId); rafId = null; } } // Resize handling function onResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } window.addEventListener('resize', onResize); function dispose() { stop(); window.removeEventListener('resize', onResize); try { renderer.dispose(); } catch (e) {} if (renderer.domElement && renderer.domElement.parentNode) { renderer.domElement.parentNode.removeChild(renderer.domElement); } } return { start, stop, setAnalyser: (a, s) => { setAnalyser(a, s); }, setSensitivity: (s) => { setSensitivity(s); }, set playing(val) { setPlaying(val); }, get playing() { return playing; }, dispose }; }