Audio Analysis

Setting Up Audio Analysis

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

// Create analyzer node
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048; // Must be a power of 2
analyser.smoothingTimeConstant = 0.8; // Value between 0-1, higher = smoother

// Set up audio source (from file, microphone, or stream)
let audioSource;

// Example: Load audio file
async function loadAudio(url) {
    const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
    
    // Create audio source from buffer
    audioSource = audioContext.createBufferSource();
    audioSource.buffer = audioBuffer;
    
    // Connect source to analyzer and output
    audioSource.connect(analyser);
    analyser.connect(audioContext.destination);
    
    // Start playback
    audioSource.start(0);
}

// Example: Use microphone input
async function useMicrophone() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        audioSource = audioContext.createMediaStreamSource(stream);
        audioSource.connect(analyser);
        // Note: Don't connect to destination to avoid feedback
    } catch (err) {
        console.error('Error accessing microphone:', err);
    }
}

// Create data arrays for analysis
const frequencyData = new Uint8Array(analyser.frequencyBinCount);
const timeData = new Uint8Array(analyser.frequencyBinCount);

// Animation loop for continuous analysis
function analyze() {
    requestAnimationFrame(analyze);
    
    // Get frequency data (0-255 values)
    analyser.getByteFrequencyData(frequencyData);
    
    // Get waveform data (0-255 values)
    analyser.getByteTimeDomainData(timeData);
    
    // Now use this data to update your visualizations
    updateVisualizations(frequencyData, timeData);
}

// Define frequency bands (in Hz)
const bands = {
    bass: { min: 20, max: 250 },
    lowMid: { min: 250, max: 500 },
    mid: { min: 500, max: 2000 },
    highMid: { min: 2000, max: 4000 },
    treble: { min: 4000, max: 20000 }
};

// Calculate average amplitude for a frequency band
function getFrequencyBandValue(frequencyData, band) {
    const nyquist = audioContext.sampleRate / 2;
    const lowIndex = Math.round(band.min / nyquist * frequencyData.length);
    const highIndex = Math.round(band.max / nyquist * frequencyData.length);
    
    let total = 0;
    let count = 0;
    
    for (let i = lowIndex; i <= highIndex; i++) {
        total += frequencyData[i];
        count++;
    }
    
    return total / count / 255; // Normalize to 0-1
}

// Usage in animation loop
function updateVisualizations(frequencyData) {
    const bassValue = getFrequencyBandValue(frequencyData, bands.bass);
    const midValue = getFrequencyBandValue(frequencyData, bands.mid);
    const trebleValue = getFrequencyBandValue(frequencyData, bands.treble);
    
    // Now use these values to drive different aspects of your visualization
    // For example:
    particleSystem.scale.set(1 + bassValue * 2, 1 + midValue * 2, 1 + trebleValue * 2);
}

// Simple energy-based beat detection
class BeatDetector {
    constructor(sensitivity = 1.5, decayRate = 0.95, minThreshold = 0.3) {
        this.sensitivity = sensitivity;
        this.decayRate = decayRate;
        this.minThreshold = minThreshold;
        this.threshold = this.minThreshold;
        this.lastBeatTime = 0;
        this.energyHistory = [];
    }
    
    detectBeat(frequencyData) {
        // Calculate current energy (focus on bass frequencies for beat detection)
        let energy = 0;
        const bassRange = Math.floor(frequencyData.length * 0.1); // Use first 10% of frequencies
        
        for (let i = 0; i < bassRange; i++) {
            energy += frequencyData[i] * frequencyData[i]; // Square for more pronounced peaks
        }
        energy = Math.sqrt(energy / bassRange) / 255; // Normalize to 0-1
        
        // Store energy history
        this.energyHistory.push(energy);
        if (this.energyHistory.length > 30) {
            this.energyHistory.shift();
        }
        
        // Calculate local average
        const avgEnergy = this.energyHistory.reduce((sum, e) => sum + e, 0) / this.energyHistory.length;
        
        // Update threshold with decay
        this.threshold = Math.max(avgEnergy * this.sensitivity, this.minThreshold);
        this.threshold *= this.decayRate;
        
        // Check if current energy exceeds threshold
        const isBeat = energy > this.threshold;
        
        // Prevent beats too close together (debounce)
        const now = performance.now();
        const timeSinceLastBeat = now - this.lastBeatTime;
        
        if (isBeat && timeSinceLastBeat > 100) { // Minimum 100ms between beats
            this.lastBeatTime = now;
            return true;
        }
        
        return false;
    }
}

// Usage
const beatDetector = new BeatDetector();

function animate() {
    requestAnimationFrame(animate);
    
    analyser.getByteFrequencyData(frequencyData);
    
    if (beatDetector.detectBeat(frequencyData)) {
        // Trigger beat-reactive visual effects
        triggerBeatVisualization();
    }
    
    // Continue with regular updates
    updateVisualizations(frequencyData);
}

// Exponential smoothing for values
class SmoothValue {
    constructor(initialValue = 0, smoothingFactor = 0.3) {
        this.value = initialValue;
        this.target = initialValue;
        this.smoothingFactor = smoothingFactor; // 0-1, higher = faster response
    }
    
    update() {
        this.value += (this.target - this.value) * this.smoothingFactor;
        return this.value;
    }
    
    setTarget(newTarget) {
        this.target = newTarget;
    }
}

// Usage
const bassSmoother = new SmoothValue(0, 0.2); // Slow response for bass
const trebleSmoother = new SmoothValue(0, 0.6); // Fast response for treble

function updateVisualizations(frequencyData) {
    // Get raw values
    const bassValue = getFrequencyBandValue(frequencyData, bands.bass);
    const trebleValue = getFrequencyBandValue(frequencyData, bands.treble);
    
    // Set as targets for smoothers
    bassSmoother.setTarget(bassValue);
    trebleSmoother.setTarget(trebleValue);
    
    // Get smoothed values
    const smoothBass = bassSmoother.update();
    const smoothTreble = trebleSmoother.update();
    
    // Use smoothed values for visualization
    updateVisualsWithSmoothedValues(smoothBass, smoothTreble);
}