[V0_FILE]typescriptreact:file="app/page.tsx" import MusicVisualizer from "@/components/music-visualizer" export default function Home() { return } [V0_FILE]typescriptreact:file="components/music-visualizer.tsx" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { Button } from "@/components/ui/button" import { Play, Pause, Mic, Upload, Settings } from "lucide-react" type VisualizationMode = "spectrum" | "waveform" | "particles" | "oscilloscope" export default function MusicVisualizer() { const canvasRef = useRef(null) const audioContextRef = useRef(null) const analyserRef = useRef(null) const sourceRef = useRef(null) const animationRef = useRef(0) const audioRef = useRef(null) const [isPlaying, setIsPlaying] = useState(false) const [isListening, setIsListening] = useState(false) const [mode, setMode] = useState("spectrum") const [showControls, setShowControls] = useState(true) const particles = useRef< Array<{ x: number y: number vx: number vy: number life: number maxLife: number color: string }> >([]) useEffect(() => { let hideTimeout: NodeJS.Timeout const handleMouseMove = () => { setShowControls(true) clearTimeout(hideTimeout) hideTimeout = setTimeout(() => setShowControls(false), 3000) } window.addEventListener("mousemove", handleMouseMove) hideTimeout = setTimeout(() => setShowControls(false), 3000) return () => { window.removeEventListener("mousemove", handleMouseMove) clearTimeout(hideTimeout) } }, []) const initAudioContext = async () => { if (!audioContextRef.current) { audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)() analyserRef.current = audioContextRef.current.createAnalyser() analyserRef.current.fftSize = 2048 analyserRef.current.connect(audioContextRef.current.destination) } if (audioContextRef.current.state === "suspended") { await audioContextRef.current.resume() } } const startMicrophoneInput = async () => { try { await initAudioContext() const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) const source = audioContextRef.current!.createMediaStreamSource(stream) source.connect(analyserRef.current!) sourceRef.current = source as any setIsListening(true) startVisualization() } catch (error) { console.error("Error accessing microphone:", error) } } const handleFileUpload = async (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file || !audioRef.current) return const url = URL.createObjectURL(file) audioRef.current.src = url await initAudioContext() if (sourceRef.current) { sourceRef.current.disconnect() } sourceRef.current = audioContextRef.current!.createMediaElementSource(audioRef.current) sourceRef.current.connect(analyserRef.current!) } const togglePlayback = () => { if (!audioRef.current) return if (isPlaying) { audioRef.current.pause() setIsPlaying(false) } else { audioRef.current.play() setIsPlaying(true) startVisualization() } } const startVisualization = () => { if (!analyserRef.current || !canvasRef.current) return const canvas = canvasRef.current const ctx = canvas.getContext("2d")! const analyser = analyserRef.current canvas.width = window.innerWidth canvas.height = window.innerHeight const bufferLength = analyser.frequencyBinCount const dataArray = new Uint8Array(bufferLength) const animate = () => { analyser.getByteFrequencyData(dataArray) ctx.fillStyle = "rgba(0, 0, 0, 0.1)" ctx.fillRect(0, 0, canvas.width, canvas.height) switch (mode) { case "spectrum": drawSpectrum(ctx, dataArray, canvas.width, canvas.height) break case "waveform": drawWaveform(ctx, dataArray, canvas.width, canvas.height) break case "particles": drawParticles(ctx, dataArray, canvas.width, canvas.height) break case "oscilloscope": drawOscilloscope(ctx, dataArray, canvas.width, canvas.height) break } animationRef.current = requestAnimationFrame(animate) } animate() } const drawSpectrum = (ctx: CanvasRenderingContext2D, dataArray: Uint8Array, width: number, height: number) => { const barWidth = (width / dataArray.length) * 2.5 let x = 0 for (let i = 0; i < dataArray.length; i++) { const barHeight = (dataArray[i] / 255) * height * 0.8 const hue = (i / dataArray.length) * 360 const saturation = 70 + (dataArray[i] / 255) * 30 const lightness = 50 + (dataArray[i] / 255) * 30 ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)` ctx.fillRect(x, height - barHeight, barWidth, barHeight) // Mirror effect ctx.fillRect(x, 0, barWidth, barHeight * 0.3) x += barWidth + 1 } } const drawWaveform = (ctx: CanvasRenderingContext2D, dataArray: Uint8Array, width: number, height: number) => { ctx.lineWidth = 3 ctx.strokeStyle = "#00ff88" ctx.beginPath() const sliceWidth = width / dataArray.length let x = 0 for (let i = 0; i < dataArray.length; i++) { const v = dataArray[i] / 128.0 const y = (v * height) / 2 if (i === 0) { ctx.moveTo(x, y) } else { ctx.lineTo(x, y) } x += sliceWidth } ctx.stroke() // Add glow effect ctx.shadowColor = "#00ff88" ctx.shadowBlur = 20 ctx.stroke() ctx.shadowBlur = 0 } const drawParticles = (ctx: CanvasRenderingContext2D, dataArray: Uint8Array, width: number, height: number) => { // Add new particles based on audio intensity const avgIntensity = dataArray.reduce((sum, val) => sum + val, 0) / dataArray.length if (avgIntensity > 50 && particles.current.length < 500) { for (let i = 0; i < Math.floor(avgIntensity / 20); i++) { particles.current.push({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 10, vy: (Math.random() - 0.5) * 10, life: 0, maxLife: 60 + Math.random() * 60, color: `hsl(${Math.random() * 360}, 70%, 60%)`, }) } } // Update and draw particles particles.current = particles.current.filter((particle) => { particle.x += particle.vx particle.y += particle.vy particle.life++ const alpha = 1 - particle.life / particle.maxLife ctx.fillStyle = particle.color.replace(")", `, ${alpha})`) ctx.beginPath() ctx.arc(particle.x, particle.y, 3, 0, Math.PI * 2) ctx.fill() return particle.life < particle.maxLife }) } const drawOscilloscope = (ctx: CanvasRenderingContext2D, dataArray: Uint8Array, width: number, height: number) => { ctx.lineWidth = 2 ctx.strokeStyle = "#ff6b6b" // Draw multiple oscilloscope traces for (let trace = 0; trace < 3; trace++) { ctx.beginPath() const offset = trace * (dataArray.length / 3) const sliceWidth = width / (dataArray.length / 3) let x = 0 for (let i = 0; i < dataArray.length / 3; i++) { const dataIndex = Math.floor(offset + i) const v = dataArray[dataIndex] / 128.0 const y = (v * height) / 4 + (height / 4) * (trace + 1) if (i === 0) { ctx.moveTo(x, y) } else { ctx.lineTo(x, y) } x += sliceWidth } ctx.stroke() } } const cycleMode = () => { const modes: VisualizationMode[] = ["spectrum", "waveform", "particles", "oscilloscope"] const currentIndex = modes.indexOf(mode) const nextIndex = (currentIndex + 1) % modes.length setMode(modes[nextIndex]) } useEffect(() => { const handleResize = () => { if (canvasRef.current) { canvasRef.current.width = window.innerWidth canvasRef.current.height = window.innerHeight } } window.addEventListener("resize", handleResize) handleResize() return () => { window.removeEventListener("resize", handleResize) if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, []) return (

) }