junkpile

23 · Tauri v2 Audio File FFT Visualizer

A standalone Tauri v2 example that analyzes a local audio file with the Web Audio API, uploads the full FFT and waveform to WebGL textures, renders audio-reactive GLSL visuals, and records the result with the source audio included.

Signal path

Native/browser audio file
        ↓
HTMLAudioElement
        ↓
MediaElementAudioSourceNode
        ├── AnalyserNode → FFT + waveform byte arrays → WebGL textures
        ├── GainNode → speakers
        └── MediaStreamDestination → canvas recording audio track

Native-open and native-drop files use this security-safe path:

Filesystem path → Rust binary reader → Tauri IPC bytes → Blob URL → audio element

The complete audio file is loaded into memory for this educational example. Browser-picked files use their existing Blob directly.

Features

• Native Tauri v2 audio-file dialog
• Browser picker fallback
• Native operating-system drag and drop
• MP3, WAV, AIFF, M4A, AAC, FLAC, OGG, and OPUS where WebKit supports decoding
• Play, pause, stop, seeking, and ±10-second movement
• Playback speed from 0.25× to 2×
• Volume and mute
• Full-file or custom in/out looping
• FFT sizes from 512 to 16384
• Full FFT and waveform textures uploaded every render frame
• Sub, bass, mid, high, air, RMS, peak, and adaptive beat analysis
• Six GLSL visual modes
• Persistent ping-pong visual feedback
• 30/60 fps canvas recording with the analyzed audio included
• MediaRecorder MP4/WebM negotiation
• Pause/resume recording
• Native chunked recording saves
• Native PNG snapshots
• Native fullscreen preview
• Scroll-safe controls

Run

npm install
npm run dev

Production build

npm run build

On macOS, the production bundle is written under:

src-tauri/target/release/bundle/

Unsigned applications may be blocked by Gatekeeper when distributed to another Mac. Shipping publicly normally requires code signing and notarization.

First test

1. Press Native open and choose a WAV or MP3.
2. Press Play.
3. Scrub the timeline and change Playback rate.
4. Set custom loop in/out points.
5. Switch among the six visual modes.
6. Record a short clip and save it.

Architecture notes

The browser audio element remains the transport clock. Shader animation uses the audio playhead rather than wall-clock time, so seeking immediately changes the visual state. The analyser provides both frequency-domain and time-domain byte arrays. Those arrays are uploaded as one-row luminance textures for direct sampling in GLSL ES 1.00.

The recording path combines canvas.captureStream() video tracks with cloned tracks from a MediaStreamAudioDestinationNode. Cloning prevents one completed recording from destroying the audio-analysis graph used by later recordings.

Large recording files are written to Rust in sequential 1 MiB chunks instead of one oversized IPC payload.

Known limitations

• Actual codec/container support is determined by the operating system WebView.
• Some compressed or unusual files may fail to decode even when their filename extension is accepted.
• Native-open/drop audio is loaded fully into memory before playback.
• MediaRecorder output depends on codec support exposed by the WebView.

This site is open source. Improve this page.