Introduction
A spectrogram visualizes audio as a time-frequency heatmap, showing which frequencies are present at each moment. This is how audio engineers spot hidden messages, identify bird calls, or debug codec artifacts. This tool decodes audio files (WAV, MP3, OGG, FLAC) in your browser, applies a Fast Fourier Transform to each frame, and renders a color-coded spectrogram with configurable FFT size and window function. No audio data is uploaded to any server.
What this tool does
- Decode audio files (WAV, MP3, OGG, FLAC) up to 50 MB using the Web Audio API's `decodeAudioData` method, entirely in the browser
- Render a spectrogram by applying a radix-2 Cooley-Tukey FFT to each frame, computing magnitude in dB, and mapping to a viridis-like color scale
- Support FFT sizes from 256 to 4096 samples, with larger sizes providing better frequency resolution but poorer time resolution
- Offer three window functions: Hann (smooth, good general-purpose), Hamming (slightly different taper), and Rectangular (no windowing, maximum frequency leakage)
- Toggle between logarithmic and linear frequency scales, with log scale emphasizing the lower frequencies that dominate music and speech
- Play back the decoded audio with a play/pause button, and display file metadata including duration, sample rate, channel count, and Nyquist frequency
How this tool works
The tool loads the audio file via the File API and decodes it using `AudioContext.decodeAudioData`, which produces an `AudioBuffer` containing PCM sample data. The first channel's samples are used for the spectrogram.
For rendering, the tool divides the audio into frames of `fftSize` samples with no overlap (hop size equals FFT size). Each frame is multiplied by the selected window function (Hann, Hamming, or rectangular) to reduce spectral leakage at frame boundaries. The windowed samples are placed into real and imaginary arrays and processed by a radix-2 Cooley-Tukey FFT implementation.
The FFT output is converted to magnitude in decibels: `20 * log10(magnitude / fftSize)`. The magnitude values are normalized to a 0-1 range using a dB range of -100 to -10. Each normalized value is mapped to a color using a viridis-like color scale (dark purple for low energy, yellow for high energy).
The spectrogram is rendered to an HTML canvas. The x-axis represents time (0 to duration), and the y-axis represents frequency (0 to Nyquist, which is sampleRate / 2). In log scale mode, the frequency axis is mapped logarithmically, which compresses the high frequencies and expands the low frequencies where most audio content resides.
Playback uses an `AudioBufferSourceNode` connected to the audio context destination, allowing you to listen to the file while viewing the spectrogram.
How spectrograms work (Cooley-Tukey FFT)
The Fast Fourier Transform (FFT) is an algorithm for computing the Discrete Fourier Transform (DFT) efficiently. The Cooley-Tukey FFT algorithm, published by James Cooley and John Tukey in 1965 in 'An Algorithm for the Machine Calculation of Complex Fourier Series' (Mathematics of Computation, Vol. 19), reduced the complexity of DFT computation from O(N^2) to O(N log N), making real-time spectral analysis practical.
A spectrogram is essentially a sequence of FFTs computed on overlapping (or in this tool, non-overlapping) frames of audio. Each FFT produces a frequency spectrum for that frame. Stacking these spectra horizontally produces a 2D image where the horizontal axis is time, the vertical axis is frequency, and color represents energy.
Window functions address a fundamental tradeoff in spectral analysis. The FFT assumes the input is periodic within the frame. When a frame cuts through the middle of a waveform, the discontinuity at the boundaries creates artificial frequencies (spectral leakage). Window functions taper the frame boundaries to zero, reducing leakage at the cost of widening spectral peaks. The Hann window (`0.5 * (1 - cos(2*pi*n / (N-1)))`) is the most common general-purpose window. The Hamming window is similar but does not reach zero at the boundaries. Rectangular (no window) gives the sharpest frequency peaks but the most leakage.
The Web Audio API specification defines `AudioContext.decodeAudioData` for decoding audio files and `AnalyserNode.getByteFrequencyData` for real-time spectral analysis. This tool uses `decodeAudioData` for file loading and a custom FFT for the spectrogram rendering, giving full control over FFT size and windowing.
Spectrograms are used in steganography to hide messages in audio. A message can be encoded as a pattern in the spectrogram itself, invisible to the ear but visible when viewed. For audio ciphers and steganography tools, see the Morse Code Audio and Audio Steganography tools. For reversing text (useful in backmasking analysis), see the Word Reverser.
How to use this tool
- Click the file input and select an audio file (WAV, MP3, OGG, or FLAC, up to 50 MB)
- The tool decodes the audio and displays file metadata: duration, sample rate, channels, and Nyquist frequency
- Choose an FFT size (256-4096). Smaller sizes give better time resolution; larger sizes give better frequency resolution
- Select a window function: Hann (recommended for general use), Hamming, or Rectangular
- Toggle logarithmic frequency scale if you want to emphasize lower frequencies, or leave it off for a linear scale
- Use the Play button to listen to the audio while viewing the spectrogram. Look for patterns, hidden messages, or frequency anomalies
Real-world examples
Spotting a spectrogram-hidden message (steganography)
Some steganography tools encode text or images directly into the spectrogram of an audio file. The audio sounds like noise or music, but when viewed as a spectrogram, the message is visible as a pattern in the frequency domain. Load the file and look for shapes, text, or images formed by the frequency content. This is a common technique in CTF challenges and electronic music.
Analyzing a Morse code audio signal
Load a WAV file containing Morse code tones. The spectrogram shows distinct horizontal bars at the tone frequency, with gaps corresponding to the spacing between dots and dashes. The time axis lets you measure the duration of each element to distinguish dots from dashes. For a dedicated Morse code audio tool, see Morse Code Audio.
Comparing FFT sizes for frequency resolution
Load a file with two close-frequency tones (e.g. 1000 Hz and 1050 Hz). With FFT size 256, the two tones may blur into one broad bar. Switch to FFT size 4096 and the two tones appear as distinct bars. This demonstrates the tradeoff: larger FFT sizes resolve closer frequencies but smear events in time.
Identifying backmasking in audio
Backmasking hides a message by recording it backwards into an audio track. The spectrogram of a backmasked segment may look unusual compared to normal speech or music, because the temporal evolution of harmonics is reversed. Use the Word Reverser to reverse text, and compare the spectrogram of forward vs reversed audio.
Comparison with similar methods
| Method | Complexity | Typical use |
|---|---|---|
| This tool (custom FFT) | O(N log N) per frame, client-side | Interactive spectrogram viewing, steganography detection |
| Web Audio AnalyserNode | Browser-optimized FFT, real-time | Live audio visualization, music players |
| SoX / FFmpeg (command line) | Server-side, highly optimized | Batch processing, automated analysis |
| Audacity / Sonic Visualiser | Desktop GUI, full-featured | Professional audio analysis, annotation |
| Python scipy.signal.spectrogram | Server-side, scientific computing | Research, data analysis pipelines |
Limitations or considerations
The tool processes the first audio channel only. Stereo files will show the left channel's spectrogram. For stereo analysis, use a desktop tool like Audacity.
The spectrogram uses non-overlapping frames (hop size equals FFT size). This means time resolution is limited to `fftSize / sampleRate` seconds per frame. Overlapping frames (e.g. 75% overlap) would produce smoother spectrograms but require 4x the computation. This tradeoff keeps the tool responsive in the browser.
The maximum file size is 50 MB. Larger files may cause the browser to run out of memory during decoding. For long recordings, trim the file first or use a desktop tool.
The FFT implementation is a radix-2 Cooley-Tukey algorithm, which requires the FFT size to be a power of 2. The tool offers 256, 512, 1024, 2048, and 4096. Non-power-of-2 sizes are not supported.
The color scale uses a fixed dB range of -100 to -10. Very quiet signals (below -100 dB) will appear as the minimum color, and very loud signals (above -10 dB) will clip to the maximum color. This range works for most audio but may need adjustment for unusual signals.
The tool does not perform any automated steganography detection. You must visually inspect the spectrogram for hidden patterns.
Frequently asked questions
What FFT size should I use?
It depends on what you are looking for. For time-precise events (percussive sounds, Morse code), use 256 or 512. For frequency-precise analysis (distinguishing close tones, identifying harmonics), use 2048 or 4096. 1024 is a good general-purpose default. The tradeoff is that larger FFT sizes give better frequency resolution but poorer time resolution.
What is spectral leakage and why do window functions help?
The FFT assumes the input frame is periodic. When a frame cuts through the middle of a waveform, the discontinuity at the boundaries creates artificial frequencies. Window functions (Hann, Hamming) taper the frame boundaries to zero, reducing these artifacts. The cost is that spectral peaks become wider. Rectangular (no window) gives the sharpest peaks but the most leakage.
Can this tool detect hidden messages in audio?
The tool renders the spectrogram, but you must visually inspect it for hidden patterns. Some steganography techniques encode text or images as spectrogram patterns. Look for shapes, text, or unusual frequency patterns that do not correspond to the audible content. This is a common element in CTF challenges.
Why does my MP3 file show artifacts in the spectrogram?
MP3 is a lossy codec that discards frequencies it deems inaudible. This creates characteristic artifacts: a cutoff at high frequencies (typically 16-20 kHz), pre-echoes before transient sounds, and missing bands. These are normal for MP3 and not steganography. WAV and FLAC files do not have these artifacts.
What is the difference between log and linear frequency scale?
Linear scale maps frequency proportionally: each pixel represents the same Hz range. Log scale maps frequency logarithmically: each pixel represents the same ratio. Log scale compresses high frequencies and expands low frequencies, which matches human hearing better. Most music and speech content is below 4 kHz, so log scale makes it more visible.
Conclusion
Spectrograms reveal the frequency content of audio over time, making them useful for steganography detection, audio analysis, and understanding how sound works. This tool renders spectrograms entirely in the browser using a custom FFT implementation. For related tools, see the Morse Code Audio and Audio Steganography tools. For reversing text (useful in backmasking analysis), see the Word Reverser.