[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Audio Visualizer | 3D Waveform', description: 'Modern, minimalist, and futuristic 3D audio visualization with real-time microphone input', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.08 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.7 0.25 200); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.75 0.22 320); --secondary-foreground: oklch(0.08 0 0); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.8 0.2 50); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.2 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.7 0.25 200); --chart-1: oklch(0.7 0.25 200); --chart-2: oklch(0.75 0.22 320); --chart-3: oklch(0.8 0.2 50); --chart-4: oklch(0.65 0.2 180); --chart-5: oklch(0.7 0.18 280); --radius: 0.75rem; --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.7 0.25 200); --sidebar-primary-foreground: oklch(0.08 0 0); --sidebar-accent: oklch(0.2 0 0); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(0.7 0.25 200); } .dark { --background: oklch(0.08 0 0); --foreground: oklch(0.98 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.98 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.98 0 0); --primary: oklch(0.7 0.25 200); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.75 0.22 320); --secondary-foreground: oklch(0.08 0 0); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.65 0 0); --accent: oklch(0.8 0.2 50); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.98 0 0); --border: oklch(0.2 0 0); --input: oklch(0.2 0 0); --ring: oklch(0.7 0.25 200); --chart-1: oklch(0.7 0.25 200); --chart-2: oklch(0.75 0.22 320); --chart-3: oklch(0.8 0.2 50); --chart-4: oklch(0.65 0.2 180); --chart-5: oklch(0.7 0.18 280); --sidebar: oklch(0.12 0 0); --sidebar-foreground: oklch(0.98 0 0); --sidebar-primary: oklch(0.7 0.25 200); --sidebar-primary-foreground: oklch(0.08 0 0); --sidebar-accent: oklch(0.2 0 0); --sidebar-accent-foreground: oklch(0.98 0 0); --sidebar-border: oklch(0.2 0 0); --sidebar-ring: oklch(0.7 0.25 200); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@react-three/fiber": "9.5.0", "@react-three/drei": "10.7.7", "three": "0.182.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { AudioVisualizer } from '@/components/audio-visualizer'; export default function Page() { return ; } [V0_FILE]typescript:file="lib/audio-processor.ts" isMerged="true" export class AudioProcessor { private audioContext: AudioContext | null = null; private analyser: AnalyserNode | null = null; private microphone: MediaStreamAudioSourceNode | null = null; private highPassFilter: BiquadFilterNode | null = null; private dataArray: Uint8Array | null = null; private frequencyData: Uint8Array | null = null; private stream: MediaStream | null = null; async initialize(): Promise { try { // Request microphone access with voice-focused settings this.stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true } }); // Create audio context this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)(); // Create high-pass filter to focus on voice frequencies (85-8000 Hz) this.highPassFilter = this.audioContext.createBiquadFilter(); this.highPassFilter.type = 'highpass'; this.highPassFilter.frequency.value = 85; // Cut below voice range this.highPassFilter.Q.value = 1; // Create analyser node with reduced sensitivity this.analyser = this.audioContext.createAnalyser(); this.analyser.fftSize = 1024; // Balanced resolution this.analyser.smoothingTimeConstant = 0.8; // More smoothing for stability this.analyser.minDecibels = -90; this.analyser.maxDecibels = -10; // Connect microphone through filter to analyser this.microphone = this.audioContext.createMediaStreamSource(this.stream); this.microphone.connect(this.highPassFilter); this.highPassFilter.connect(this.analyser); // Initialize data arrays const bufferLength = this.analyser.frequencyBinCount; this.dataArray = new Uint8Array(bufferLength); this.frequencyData = new Uint8Array(bufferLength); } catch (error) { console.error('[v0] Error initializing audio:', error); throw error; } } getFrequencyData(): Uint8Array | null { if (!this.analyser || !this.frequencyData) return null; this.analyser.getByteFrequencyData(this.frequencyData); return this.frequencyData; } getTimeData(): Uint8Array | null { if (!this.analyser || !this.dataArray) return null; this.analyser.getByteTimeDomainData(this.dataArray); return this.dataArray; } getAverageVolume(): number { const data = this.getFrequencyData(); if (!data) return 0; const sum = data.reduce((acc, val) => acc + val, 0); return sum / data.length / 255; // Normalize to 0-1 } dispose(): void { if (this.microphone) { this.microphone.disconnect(); this.microphone = null; } if (this.highPassFilter) { this.highPassFilter.disconnect(); this.highPassFilter = null; } if (this.stream) { this.stream.getTracks().forEach(track => track.stop()); this.stream = null; } if (this.audioContext) { this.audioContext.close(); this.audioContext = null; } this.analyser = null; this.dataArray = null; this.frequencyData = null; } } [V0_FILE]typescriptreact:file="components/audio-visualizer.tsx" 'use client'; import { useRef, useEffect, useState, useMemo } from 'react'; import { Canvas, useFrame } from '@react-three/fiber'; import { OrbitControls } from '@react-three/drei'; import * as THREE from 'three'; import { AudioProcessor } from '@/lib/audio-processor'; interface ParticleSphereProps { audioProcessor: AudioProcessor | null; } function ParticleSphere({ audioProcessor }: ParticleSphereProps) { const pointsRef = useRef(null); const particleCount = 5000; const baseRadius = 2.5; const timeRef = useRef(0); // Store original positions on sphere surface in spherical coordinates const originalPositionsRef = useRef(null); const sphericalCoordsRef = useRef<{theta: number; phi: number}[]>([]); const [positions, colors] = useMemo(() => { const positions = new Float32Array(particleCount * 3); const colors = new Float32Array(particleCount * 3); const sphericalCoords: {theta: number; phi: number}[] = []; // Distribute particles evenly on sphere surface using Fibonacci sphere algorithm const goldenAngle = Math.PI * (3 - Math.sqrt(5)); for (let i = 0; i < particleCount; i++) { const y = 1 - (i / (particleCount - 1)) * 2; const radiusAtY = Math.sqrt(1 - y * y); const theta = goldenAngle * i; const x = Math.cos(theta) * radiusAtY; const z = Math.sin(theta) * radiusAtY; // Store spherical coordinates for angular movement const phi = Math.acos(y); sphericalCoords.push({ theta: theta % (Math.PI * 2), phi }); // Position on sphere surface positions[i * 3] = x * baseRadius; positions[i * 3 + 1] = y * baseRadius; positions[i * 3 + 2] = z * baseRadius; // Color gradient based on position const color = new THREE.Color(); // Map y position to hue (cyan to magenta to amber) const t = (y + 1) / 2; if (t < 0.33) { color.setHSL(0.5, 0.8, 0.6); // Cyan } else if (t < 0.66) { color.setHSL(0.83, 0.8, 0.6); // Magenta } else { color.setHSL(0.12, 0.8, 0.6); // Amber } colors[i * 3] = color.r; colors[i * 3 + 1] = color.g; colors[i * 3 + 2] = color.b; } originalPositionsRef.current = new Float32Array(positions); sphericalCoordsRef.current = sphericalCoords; return [positions, colors]; }, []); useFrame(() => { if (!pointsRef.current || !audioProcessor || !originalPositionsRef.current) return; timeRef.current += 0.01; // Get frequency data const frequencyData = audioProcessor.getFrequencyData(); const volume = audioProcessor.getAverageVolume(); if (!frequencyData) return; // Debug logging if (Math.floor(timeRef.current) % 10 === 0 && timeRef.current % 1 < 0.02) { console.log('[v0] Volume:', volume, 'Freq sample:', frequencyData[frequencyData.length / 2]); } const geometry = pointsRef.current.geometry; const positionAttribute = geometry.attributes.position; // Update each particle position based on audio for (let i = 0; i < particleCount; i++) { const i3 = i * 3; // Get original spherical coordinates const origCoords = sphericalCoordsRef.current[i]; if (!origCoords) continue; // Use average frequency across spectrum for more uniform movement let avgFrequency = 0; for (let j = 0; j < frequencyData.length; j++) { avgFrequency += frequencyData[j]; } avgFrequency = avgFrequency / frequencyData.length / 255; // Normalize to 0-1 // Boost audio signal and combine with volume const audioSignal = Math.max(avgFrequency, volume) * 2; // Amplify the signal // Add angular displacement with increased sensitivity const angularSpeed = audioSignal * 0.4; const thetaOffset = Math.sin(timeRef.current * 1.5 + i * 0.01) * angularSpeed; const phiOffset = Math.cos(timeRef.current * 1.2 + i * 0.015) * angularSpeed * 0.4; const newTheta = origCoords.theta + thetaOffset; const newPhi = Math.max(0.1, Math.min(Math.PI - 0.1, origCoords.phi + phiOffset)); // Calculate radial displacement with increased sensitivity const radialDisplacement = audioSignal * 1.2; const wave = Math.sin(timeRef.current * 2) * 0.15; const totalRadius = baseRadius + radialDisplacement + wave; // Convert spherical to cartesian with angular movement const x = totalRadius * Math.sin(newPhi) * Math.cos(newTheta); const y = totalRadius * Math.cos(newPhi); const z = totalRadius * Math.sin(newPhi) * Math.sin(newTheta); positionAttribute.setXYZ(i, x, y, z); } positionAttribute.needsUpdate = true; // Rotate the sphere slowly pointsRef.current.rotation.y += 0.003; pointsRef.current.rotation.x = Math.sin(timeRef.current * 0.2) * 0.1; }); return ( ); } export function AudioVisualizer() { const [audioProcessor, setAudioProcessor] = useState(null); const [isInitialized, setIsInitialized] = useState(false); const [error, setError] = useState(null); const handleStart = async () => { try { const processor = new AudioProcessor(); await processor.initialize(); setAudioProcessor(processor); setIsInitialized(true); setError(null); } catch (err) { setError('Failed to access microphone. Please grant permission and try again.'); console.error('[v0] Audio initialization error:', err); } }; useEffect(() => { return () => { if (audioProcessor) { audioProcessor.dispose(); } }; }, [audioProcessor]); return (

{!isInitialized ? (

Audio Visualizer

{'Experience sound in 3D space'}

{error && (

{error}

)}

{'Click to enable microphone access. Your audio is processed locally and never recorded or transmitted.'}

) : ( <>

{/* Info overlay */}

{'Drag to rotate • Scroll to zoom'}

)}

); }

About

Tags

Share

About

Tags

Share

More from tomasr

More Templates Like This

About

Tags

Share

About

Tags

Share

More from tomasr

More Templates Like This