audio-spectrogram.ts

Interactive tool for turning audio files into spectrogram visualisations in the browser.


Live demo

Features

- Upload an audio file and inspect the generated spectrogram
- Switch between precision profiles to tune performance vs. detail
- Adjust the maximum frequency shown in the chart

TypeScript API

``typescript
import {
AudioProfileMode,
DrawProgress,
decodeAudio,
drawSpectrogram,
getAudioProfile,
getMonoAudioData,
getNow,
getSpectrogramData,
loadFile,
loadUrl,
} from 'audio-spectrogram'
`

- loadFile(file: File) → Promise: read a user-selected file.
- loadUrl(url: string) → Promise: fetch audio data remotely with error handling.
- decodeAudio(buffer: ArrayBuffer, sampleRate?: number) → Promise: decode PCM data using the Web Audio API.
- getMonoAudioData(audio: AudioBuffer) → Float32Array: downmix multi-channel audio to mono.
- getSpectrogramData(audio: Float32Array, windowSize: number) → number[][]: compute log-scaled magnitudes for each FFT window.
- drawSpectrogram(options) → Promise: render grayscale pixels onto a canvas while reporting optional onProgress callbacks.
- getAudioProfile(mode: AudioProfileMode) → profile settings (sampleRate, windowSize, hopSize, maxFrequency).
- AudioProfileMode: union of 'high-precision' | 'medium-precision' | 'low-precision'.
- DrawProgress: { percent: number; etaMs: number | null }.

Development

`bash
npm install
npm run dev
`

Open index.html` in a browser (or use your preferred dev server) to iterate on the UI.

License

This project is licensed with BSD-2-Clause

This is free, libre, and open-source software. It comes down to four essential freedoms [[ref]](https://seirdy.one/2021/01/27/whatsapp-and-the-domestication-of-users.html#fnref:2):

- The freedom to run the program as you wish, for any purpose
- The freedom to study how the program works, and change it so it does your computing as you wish
- The freedom to redistribute copies so you can help others
- The freedom to distribute copies of your modified versions to others