audio visualizer

257 TheBotAtRedstone

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ultimate Visualizer Studio Pro</title>
    <style>
        body { margin: 0; background: #000; color: #fff; font-family: 'Segoe UI', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; }
        #ui { position: absolute; z-index: 10; background: rgba(15,15,15,0.95); padding: 20px; border-radius: 20px; backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); width: 320px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,0.9); }
        canvas { max-width: 100%; max-height: 100vh; }
        .group { margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 10px; }
        label { display: block; font-size: 10px; text-transform: uppercase; color: #00d4ff; margin-bottom: 5px; font-weight: 800; }
        input[type="text"], input[type="file"], select { width: 100%; background: #222; border: 1px solid #444; color: #fff; padding: 8px; border-radius: 6px; box-sizing: border-box; font-size: 12px; margin-bottom: 5px; }
        .toggle-group { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-top: 5px; cursor: pointer; }
        .toggle-group input { width: auto; cursor: pointer; }
        button { width: 100%; background: linear-gradient(135deg, #007bff, #bc00ff); color: white; border: none; padding: 14px; border-radius: 10px; cursor: pointer; font-weight: bold; margin-top: 10px; transition: 0.3s; }
        button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.2); }
        button:disabled { background: #333; color: #666; cursor: not-allowed; }
        #status { font-size: 11px; color: #888; text-align: center; margin-top: 10px; }
    </style>
</head>
<body>

<div id="ui">
        <h3 style="margin: 0 0 15px 0; text-align: center;">Visualizer Settings</h3>
        
        <div class="group">
            <label>1. Visual Mode</label>
            <select id="modeSelect">
                <option value="circle">Circular Spectrum</option>
                <option value="bars">Linear Bars</option>
                <option value="wave">Waveform</option>
            </select>
        </div>

<div class="group">
            <label>2. Dynamic Effects</label>
            <label class="toggle-group"><input type="checkbox" id="shakeToggle" checked> Bass Shake</label>
            <label class="toggle-group"><input type="checkbox" id="blurToggle" checked> Reactive Blur</label>
            <label class="toggle-group"><input type="checkbox" id="particleToggle" checked> Floating Particles</label>
        </div>

<div class="group">
            <label>3. Content</label>
            <input type="text" id="songTitle" placeholder="Song Title">
            <input type="text" id="artistName" placeholder="Artist Name">
            <label>Audio</label><input type="file" id="audioIn" accept="audio/*">
            <label>Background</label><input type="file" id="bgIn" accept="image/*">
            <label>Logo</label><input type="file" id="logoIn" accept="image/*">
        </div>

<button id="exportBtn" disabled>START MP4 EXPORT</button>
        <div id="status">Upload audio to begin</div>
    </div>

let audio = new Audio(), bgImg = new Image(), logoImg = new Image();
        let audioCtx, analyser, source, recorder, chunks = [];
        canvas.width = 1920; canvas.height = 1080;

// Particle System Setup
        const particles = Array.from({length: 80}, () => ({
            x: Math.random() * canvas.width, y: Math.random() * canvas.height,
            size: Math.random() * 3 + 1, speed: Math.random() * 1.5 + 0.5
        }));

audioIn.onchange = (e) => { audio.src = URL.createObjectURL(e.target.files[0]); exportBtn.disabled = false; status.innerText = "Ready to Render"; };
        bgIn.onchange = (e) => { bgImg.crossOrigin="anonymous"; bgImg.src = URL.createObjectURL(e.target.files[0]); };
        logoIn.onchange = (e) => { logoImg.crossOrigin="anonymous"; logoImg.src = URL.createObjectURL(e.target.files[0]); };

exportBtn.onclick = () => {
            if (!audioCtx) {
                audioCtx = new AudioContext();
                analyser = audioCtx.createAnalyser();
                source = audioCtx.createMediaElementSource(audio);
                source.connect(analyser); analyser.connect(audioCtx.destination);
                analyser.fftSize = 512;
            }
            audio.play(); startRecording(); render();
            exportBtn.disabled = true; status.innerText = "Recording... Stay on this tab.";
        };

function render() {
            if (audio.paused && !recorder) return;
            requestAnimationFrame(render);
            const dataArray = new Uint8Array(analyser.frequencyBinCount);
            if (modeSelect.value === 'wave') analyser.getByteTimeDomainData(dataArray);
            else analyser.getByteFrequencyData(dataArray);

const avg = dataArray.reduce((a,b)=>a+b)/dataArray.length;
            const cx = canvas.width/2, cy = canvas.height/2;

ctx.save();
            
            // Effect: Shake
            if (shakeToggle.checked && avg > 110) {
                const s = (avg-110)/8;
                ctx.translate(Math.random()*s-s/2, Math.random()*s-s/2);
            }

// Draw Background + Effect: Blur
            ctx.fillStyle = "#000"; ctx.fillRect(0,0, canvas.width, canvas.height);
            if (bgImg.src) {
                if (blurToggle.checked) ctx.filter = `blur(${avg/18}px)`;
                let r = Math.max(canvas.width/bgImg.width, canvas.height/bgImg.height);
                ctx.drawImage(bgImg, (canvas.width-bgImg.width*r)/2, (canvas.height-bgImg.height*r)/2, bgImg.width*r, bgImg.height*r);
                ctx.filter = 'none';
                ctx.fillStyle = "rgba(0,0,0,0.5)"; ctx.fillRect(0,0, canvas.width, canvas.height);
            }

// Effect: Particles
            if (particleToggle.checked) {
                ctx.fillStyle = "rgba(255,255,255,0.4)";
                particles.forEach(p => {
                    ctx.beginPath(); ctx.arc(p.x, p.y, p.size * (1+avg/100), 0, Math.PI*2); ctx.fill();
                    p.y -= p.speed * (1 + avg/40);
                    if (p.y < 0) p.y = canvas.height;
                });
            }

// Draw Visualization
            ctx.lineWidth = 8; ctx.lineCap = 'round'; ctx.shadowBlur = 15;
            if (modeSelect.value === 'circle') {
                for (let i = 0; i < dataArray.length; i++) {
                    const angle = (i / dataArray.length) * Math.PI * 2;
                    const h = (dataArray[i]/255) * 280;
                    ctx.strokeStyle = `hsl(${i + 200}, 100%, 60%)`; ctx.shadowColor = ctx.strokeStyle;
                    ctx.beginPath(); ctx.moveTo(cx + Math.cos(angle)*200, cy + Math.sin(angle)*200);
                    ctx.lineTo(cx + Math.cos(angle)*(200+h), cy + Math.sin(angle)*(200+h)); ctx.stroke();
                }
            } else if (modeSelect.value === 'bars') {
                const bw = canvas.width / dataArray.length * 2.5;
                for (let i = 0; i < dataArray.length; i++) {
                    const h = (dataArray[i]/255) * 600;
                    ctx.strokeStyle = `hsl(${i + 200}, 100%, 60%)`; ctx.beginPath();
                    ctx.moveTo(i*bw, canvas.height); ctx.lineTo(i*bw, canvas.height-h); ctx.stroke();
                }
            }

// Draw Logo
            if (logoImg.src) {
                ctx.save(); ctx.beginPath(); ctx.arc(cx, cy, 180, 0, Math.PI*2); ctx.clip();
                let pulse = 1 + (avg / 600);
                let s = (360/Math.min(logoImg.width, logoImg.height)) * pulse;
                ctx.drawImage(logoImg, cx - (logoImg.width*s)/2, cy - (logoImg.height*s)/2, logoImg.width*s, logoImg.height*s);
                ctx.restore();
            }

// Draw Text
            ctx.textAlign = "center"; ctx.fillStyle = "white";
            ctx.font = "bold 60px 'Segoe UI'"; ctx.fillText(songTitle.value.toUpperCase(), cx, canvas.height - 180);
            ctx.font = "30px 'Segoe UI'"; ctx.fillStyle = "#00d4ff"; ctx.fillText(artistName.value, cx, canvas.height - 130);
            
            ctx.restore();
        }

CSS