Resources

// Create audio context
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

// Create analyzer node
const analyzer = audioContext.createAnalyser();
analyzer.fftSize = 1024;  // Must be power of 2
analyzer.smoothingTimeConstant = 0.85;  // 0-1 range

// Frequency data arrays
const frequencyData = new Uint8Array(analyzer.frequencyBinCount);
const timeData = new Uint8Array(analyzer.frequencyBinCount);

// Load and play audio
async function loadAudio(url) {
  try {
    const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
    
    // Create source node
    const source = audioContext.createBufferSource();
    source.buffer = audioBuffer;
    
    // Connect audio graph
    source.connect(analyzer);
    analyzer.connect(audioContext.destination);
    
    // Start playback
    source.start(0);
    
    // Begin analysis
    requestAnimationFrame(analyzeAudio);
    
  } catch (error) {
    console.error('Error loading audio:', error);
  }
}

// Analyze audio in animation loop
function analyzeAudio() {
  // Get frequency data (0-255 range)
  analyzer.getByteFrequencyData(frequencyData);
  
  // Get time domain data (0-255 range)
  analyzer.getByteTimeDomainData(timeData);
  
  // Use the data to drive visualizations
  updateVisualization(frequencyData, timeData);
  
  // Loop
  requestAnimationFrame(analyzeAudio);
}

// Example visualization update function
function updateVisualization(frequencyData, timeData) {
  // Calculate average bass energy (frequencies 0-10)
  let bassSum = 0;
  for (let i = 0; i < 10; i++) {
    bassSum += frequencyData[i];
  }
  const bassAvg = bassSum / 10 / 255;  // 0-1 range
  
  // Apply to visualization elements
  myVisualElement.scale.set(1 + bassAvg * 2);
}

// Start everything
loadAudio('path/to/audio.mp3');

// Create particle system geometry
const particleCount = 5000;
const particles = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);

// Initialize particles in a sphere
for (let i = 0; i < particleCount; i++) {
  const i3 = i * 3;
  
  // Random sphere distribution
  const radius = Math.random() * 30;
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(2 * Math.random() - 1);
  
  positions[i3] = radius * Math.sin(phi) * Math.cos(theta);
  positions[i3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
  positions[i3 + 2] = radius * Math.cos(phi);
  
  // Random initial colors
  colors[i3] = Math.random();
  colors[i3 + 1] = Math.random();
  colors[i3 + 2] = Math.random();
}

particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
particles.setAttribute('color', new THREE.BufferAttribute(colors, 3));

// Create particle material
const particleMaterial = new THREE.PointsMaterial({
  size: 0.5,
  vertexColors: true,
  transparent: true,
  opacity: 0.8
});

// Create particle system
const particleSystem = new THREE.Points(particles, particleMaterial);
scene.add(particleSystem);

// Function to update particles with audio data
function updateParticles(frequencyData) {
  const positions = particles.attributes.position.array;
  const colors = particles.attributes.color.array;
  
  // Calculate audio energy in different frequency bands
  const bassEnergy = getAverageEnergy(frequencyData, 0, 10) / 255;
  const midEnergy = getAverageEnergy(frequencyData, 10, 100) / 255;
  const highEnergy = getAverageEnergy(frequencyData, 100, 255) / 255;
  
  for (let i = 0; i < particleCount; i++) {
    const i3 = i * 3;
    
    // Update positions based on frequency energies
    const dist = Math.sqrt(
      positions[i3] ** 2 + 
      positions[i3 + 1] ** 2 + 
      positions[i3 + 2] ** 2
    );
    
    // Different frequency bands affect different dimensions
    positions[i3] += Math.sin(dist * 0.1) * bassEnergy * 0.5;
    positions[i3 + 1] += Math.cos(dist * 0.05) * midEnergy * 0.3;
    positions[i3 + 2] += Math.sin(time * 0.1) * highEnergy * 0.2;
    
    // Update colors based on frequency
    colors[i3] = Math.min(1, bassEnergy * 2);     // Red - bass
    colors[i3 + 1] = Math.min(1, midEnergy * 2);  // Green - mids
    colors[i3 + 2] = Math.min(1, highEnergy * 2); // Blue - highs
  }
  
  particles.attributes.position.needsUpdate = true;
  particles.attributes.color.needsUpdate = true;
}

// Helper function to get average energy in a frequency range
function getAverageEnergy(frequencyData, startBin, endBin) {
  let sum = 0;
  for (let i = startBin; i < endBin; i++) {
    sum += frequencyData[i];
  }
  return sum / (endBin - startBin);
}