Browser-based audio visualization tool for rapid inspection of .wav recordings. Drag-and-drop waveforms + spectrograms. Client-side only.
- Multi-file upload — Drag multiple large .wav files
- Dual visualization — Waveform + spectrogram views
- Interactive controls — Amplitude range, zoom, color scale
- Offline-first — No server, processes ~10x real-time [web:8]
- Responsive — Mobile/desktop optimized
- Export ready — PNG waveforms/spectrograms
Built for insect bioacoustics research—rapid quality checks on field .wav recordings. Designed for non-technical users (farmers, field techs) needing instant visual feedback during remote fieldwork.
Key motivations:
- Offline capability for field use
- Handles hours-long recordings (~500MB peak memory)
- No coding required—drag, adjust sliders, export PNGs
┌─ File I/O FileSelector.svelte, FileList.svelte
│
├─ Signal Processing ├─ FFmpeg.wasm (.wav decode)
│ └─ fft.ts (512pt STFT)
│
├─ Visualization ├─ graph.svelte (orchestrator)
│ ├─ waveform.svelte
│ └─ spectrogram.svelte
│
└─ Controls RangeSlider.svelte, ViewSelector.svelte
| Layer | Tech |
|---|---|
| Framework | SvelteKit 2.16+, TypeScript, Vite |
| Audio | FFmpeg.wasm, Web Audio API |
| Viz | D3.js (scales), Canvas2D |
| Styling | TailwindCSS 3.4 |
| Controls | noUiSlider |
Bundle: ~30MB (FFmpeg + deps), loads in <5s modern browsers
These instructions are made for ubuntu machines:
Install Node:
sudo apt update && sudo apt upgrade -y
sudo apt install -y curl software-properties-common
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
Config your bash file:
mkdir -p ~/.npm-global
npm config set prefix '~/.npm-global'
echo 'export PATH=$HOME/.npm-global/bin:$PATH' >> ~/.bashrc
source ~/.bashrc
Check to see if Node exists
node -v
If you did this correcly - output should look like this:
v20.18.3
Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --openrm -rf .svelte-kit/ node_modules/.vite/ dist/ pnpm dev # or npm run dev / yarn dev
To create a production version of your app:
npm run buildYou can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.
- This is deployed through github pages. Bick Graphing