Audio Analysis in Audio Elements
Audio elements expose real-time audio frequency data through FFT (Fast Fourier Transform) analysis, enabling waveform visualizations and audio-reactive effects without requiring separate audio processing pipelines.
Why Real-Time Audio Analysis Matters
Using separate audio analysis tools or preprocessing steps to extract frequency data presents these challenges:
- Preprocessing overhead: Audio analysis must happen before visualization, requiring additional build steps
- Static data: Pre-computed waveforms can't respond to real-time playback changes
- Pipeline complexity: Separate tools and formats for audio analysis vs. playback
Editframe's approach integrates audio analysis directly into the audio element, providing:
- Real-time frequency data: FFT analysis happens during playback, enabling dynamic visualizations
- Unified API: Audio data accessed through the same element that handles playback
- No preprocessing: Waveforms and audio-reactive effects work immediately without build steps
FFT Configuration
The audio element provides configurable FFT parameters to optimize for different visualization needs.
fft-size — Frequency resolution (must be a power of 2, e.g., 64, 128, 256, 512, 1024)
Higher values provide more frequency bins for more detailed waveform visualizations, at higher CPU cost.
fftDecay — Smoothing (frames averaged)
Higher values smooth waveform animation by averaging multiple frames of audio data.
fftGain — Amplitude multiplier
Higher values amplify waveform amplitude for better visibility.
interpolateFrequencies — Fill missing frequencies
Set to true for telephone-quality audio (highpass filtered sources) to fill in missing frequency bins.