junkpile

23 · Tauri v1 Audio File FFT Visualizer

A standalone Tauri v1 example that turns a local audio file into a GPU-driven visual performance and recording source.

Unlike Example 13, which analyses a live microphone, this project has a real media timeline. The audio playhead drives transport, seeking, loop regions, playback rate, spectral analysis, WebGL animation, and recorded output.

What this example demonstrates

• Loading local audio through a browser file picker or drag and drop
• Reusing one HTMLAudioElement for multiple files
• Connecting a media element to Web Audio with createMediaElementSource()
• Uploading the complete FFT and waveform to WebGL textures every frame
• Reducing the spectrum into sub, bass, mid, high, air, RMS, and beat values
• Synchronizing shader time to the audio playhead
• Recording a WebGL canvas together with the analysed audio track
• Saving recordings and PNG frames through the Tauri v1 dialog/filesystem APIs

Signal path

Local audio file
      ↓
HTMLAudioElement
      ↓
MediaElementAudioSourceNode
      ↓
AnalyserNode ───────────────→ output volume → speakers
      │
      ├─ FFT byte array ───→ WebGL spectrum texture
      ├─ waveform array ───→ WebGL waveform texture
      ├─ frequency bands ──→ GLSL uniforms
      └─ audio stream ─────→ MediaRecorder
                                  ↑
WebGL canvas.captureStream() ─────┘

The analyser is connected to a MediaStreamAudioDestinationNode, allowing the canvas video and the original analysed audio to be recorded together.

Features

Audio source and transport

• MP3, WAV, AIFF, M4A, AAC, FLAC, OGG, and OPUS where supported by the system WebView
• File picker and drag-and-drop loading
• Play, pause, stop, seek, and ±10-second movement
• Playback rates from 0.25× to 2×
• Output volume and mute
• Full-file looping
• Custom loop-in and loop-out points
• File, duration, format, and sample-rate telemetry

Analysis

• FFT sizes from 512 to 16384
• Analyser smoothing
• Visual sensitivity
• Independent band attack and release
• Sub: 20–60 Hz
• Bass: 60–250 Hz
• Mid: 250 Hz–2 kHz
• High: 2–8 kHz
• Air: 8 kHz–Nyquist
• RMS and peak dB estimation
• Adaptive low-frequency beat detector
• Spectrum and waveform monitors
• Complete FFT and waveform textures—not only four coarse uniforms

Visuals

• Spectrum rings
• Waveform tunnel
• Frequency terrain
• Aurora field
• Beat grid
• Spectral ribbons
• Ping-pong visual feedback
• Feedback zoom
• Intensity, motion, frequency scale, hue, saturation, brightness, and contrast

Capture

• 30 or 60 fps canvas recording
• 12, 24, or 40 Mbps video bitrate
• MP4/H.264/AAC when the WebView exposes it
• WebM VP9/VP8 + Opus fallback
• Pause and resume
• Recording duration and approximate size telemetry
• Native save dialog
• PNG current-frame export
• Browser download fallback when the global Tauri API is unavailable

Project structure

23-tauri-v1-audio-file-fft-visualizer/
├── package.json
├── README.md
├── src/
│   ├── index.html       interface, transport, meters, and canvas
│   ├── styles.css       responsive control panel and stage
│   └── app.js           audio graph, analysis, WebGL, recording, and export
└── src-tauri/
    ├── Cargo.toml
    ├── build.rs
    ├── tauri.conf.json
    ├── icons/
    └── src/main.rs

Run

npm install
npm run dev

Then:

1. Choose or drop an audio file.
2. Press Play.
3. Select a visual mode.
4. Adjust sensitivity if the meters are too quiet or saturated.
5. Use Set in and Set out to create a loop region.
6. Press Record to capture the visual and file audio together.

Important implementation details

The media source node is created once

A given HTMLAudioElement can only be connected to one MediaElementAudioSourceNode. This example keeps the element and node alive, replacing only the element’s source URL when another file is loaded.

Shader time follows the file

u_time receives audio.currentTime, not only wall-clock time. Pausing freezes timeline-driven motion, seeking jumps the visual timeline, and changing playback speed changes the animation rate with the audio.

Volume does not change analysis sensitivity

The analyser feeds the output and recording branches. Speaker volume is applied after analysis, so muting the speakers does not eliminate the FFT or recorded audio. Use Sensitivity to change visual response.

Codec availability is platform-dependent

MediaRecorder support is determined at runtime. A WebView may support WebM but not MP4, or may expose recording differently across macOS, Windows, and Linux.

Troubleshooting

A file loads but Play does nothing

Try another audio format. File-extension support does not guarantee that the operating system WebView has the required codec. WAV and MP3 are useful first tests.

The meters remain flat

Press Play once so the user gesture can resume the Web Audio context. Also confirm that Sensitivity is above 1.0 and the file contains audible signal.

Recording contains video but no audio

Start playback once before recording so the Web Audio graph exists. The recorder can capture an idle canvas before the audio graph has been created, but no audio track will exist yet.

The save button remains disabled

The button activates only after MediaRecorder has fully stopped and assembled the final Blob.

Seeking sounds delayed

Some compressed files seek only to codec key or packet boundaries. WAV generally provides the most exact transport response.

Scope

This example intentionally focuses on local file analysis. It does not decode audio in Rust, calculate an offline waveform overview, or perform multitrack mixing. Those would be separate examples or future expansions.

This site is open source. Improve this page.