DEV Community: The Audio Stuff

Detecting fake hi-res audio in the browser: a peak-hold FFT with the Web Audio API

The Audio Stuff — Mon, 26 Oct 2026 01:52:56 +0000

The file header says 24-bit/96 kHz, but that only describes the container. If you want to know what is actually in the file, you have to look at the spectrum. I built a browser tool that does this for The Audio Stuff, the FLAC & Hi-Res Audio Checker. Here is how to build the core of one with the Web Audio API and a plain JavaScript FFT, with no server and no libraries.

1. Don't let decodeAudioData resample your file

This is the trap that catches almost everyone. decodeAudioData() always resamples the decoded audio to the sample rate of the context you call it on. A default AudioContext usually runs at 44.1 or 48 kHz, so a genuine 96 kHz file comes back at 48 kHz, and everything above 24 kHz has been filtered away before your analysis starts.

The fix is to read the real sample rate from the file header first, then decode with an OfflineAudioContext created at that rate.

function readSampleRate(bytes) {
  const v = new DataView(bytes);
  const tag = String.fromCharCode(...new Uint8Array(bytes, 0, 4));

  if (tag === "fLaC") {
    // STREAMINFO: rate is 20 bits starting at byte 18 of the file
    const b = new Uint8Array(bytes, 18, 3);
    return (b[0] << 12) | (b[1] << 4) | (b[2] >> 4);
  }

  if (tag === "RIFF") {
    // walk the chunks until we find "fmt "
    let p = 12;
    while (p + 8 <= v.byteLength) {
      const id = String.fromCharCode(...new Uint8Array(bytes, p, 4));
      const size = v.getUint32(p + 4, true);
      if (id === "fmt ") return v.getUint32(p + 12, true);
      p += 8 + size + (size & 1);
    }
  }
  return null; // MP3, AAC and others: fall back to a default context
}

async function decodeNative(file) {
  const bytes = await file.arrayBuffer();
  const rate = readSampleRate(bytes) ?? 48000;
  let ctx;
  try {
    ctx = new OfflineAudioContext(1, 1, rate);
  } catch {
    ctx = new OfflineAudioContext(1, 1, 48000); // rate not supported here
  }
  return ctx.decodeAudioData(bytes.slice(0)); // slice: decode detaches the buffer
}

The Web Audio spec only guarantees sample rates from 8 kHz to 96 kHz. Browsers differ above that, so keep the try/catch, and tell the user when you had to fall back.

2. A small radix-2 FFT

An AnalyserNode is built for real-time display, not for walking through a whole file offline. For analysis, a plain iterative FFT is simpler and fast enough.

function fft(re, im) {
  const n = re.length;
  for (let i = 1, j = 0; i < n; i++) {        // bit reversal
    let bit = n >> 1;
    for (; j & bit; bit >>= 1) j ^= bit;
    j ^= bit;
    if (i < j) {
      [re[i], re[j]] = [re[j], re[i]];
      [im[i], im[j]] = [im[j], im[i]];
    }
  }
  for (let len = 2; len <= n; len <<= 1) {    // butterflies
    const ang = (-2 * Math.PI) / len;
    for (let i = 0; i < n; i += len) {
      for (let k = 0; k < len / 2; k++) {
        const wr = Math.cos(ang * k), wi = Math.sin(ang * k);
        const a = i + k, b = a + len / 2;
        const tr = re[b] * wr - im[b] * wi;
        const ti = re[b] * wi + im[b] * wr;
        re[b] = re[a] - tr; im[b] = im[a] - ti;
        re[a] += tr;        im[a] += ti;
      }
    }
  }
}

Precompute the twiddle factors if you care about speed. For a few hundred frames it hardly matters.

3. Peak-hold across the whole file

A single FFT frame tells you about one moment. A cymbal crash two minutes in might be the only thing with energy above 22 kHz. So take a frame every second of audio, and for each frequency bin keep the loudest value you have seen. This is a peak-hold spectrum.

const N = 32768;
const hann = Float32Array.from({ length: N },
  (_, i) => 0.5 - 0.5 * Math.cos((2 * Math.PI * i) / (N - 1)));

function peakHold(buffer) {
  const peak = new Float32Array(N / 2).fill(-Infinity);
  const re = new Float32Array(N), im = new Float32Array(N);
  const hop = buffer.sampleRate;               // one frame per second

  for (let ch = 0; ch < buffer.numberOfChannels; ch++) {
    const x = buffer.getChannelData(ch);
    for (let start = 0; start + N <= x.length; start += hop) {
      for (let i = 0; i < N; i++) { re[i] = x[start + i] * hann[i]; im[i] = 0; }
      fft(re, im);
      for (let k = 1; k < N / 2; k++) {
        const mag = Math.hypot(re[k], im[k]);
        const dbfs = 20 * Math.log10((4 * mag) / N + 1e-12);
        if (dbfs > peak[k]) peak[k] = dbfs;
      }
    }
  }
  return peak; // bin k is k * sampleRate / N Hz
}

The 4 / N scaling makes a full-scale sine read about 0 dBFS. The one-sided spectrum contributes a factor of 2, and the Hann window halves the amplitude of a tone, so together they give 2 / (N × 0.5). A 32k frame gives about 2.9 Hz resolution at 96 kHz, which is plenty for finding a cutoff.

Move this into a Web Worker. Even simple loops over millions of samples will freeze the page otherwise.

4. Turn the spectrum into a number

People want to read one number, such as "content reaches 21 kHz". A robust way to get one is to group the bins into 1 kHz bands and find the highest band where most of the bins clear a noise floor, for example −90 dBFS. Requiring most of the band, rather than any single bin, stops one stray spike from counting.

function contentReaches(peak, rate, floor = -90) {
  const binHz = rate / N;
  let top = 0;
  for (let f = 0; f + 1000 <= rate / 2; f += 1000) {
    const k0 = Math.ceil(f / binHz), k1 = Math.floor((f + 1000) / binHz);
    let above = 0;
    for (let k = k0; k < k1; k++) if (peak[k] > floor) above++;
    if (above > (k1 - k0) / 2) top = f + 1000;
  }
  return top; // Hz
}

5. Is the top a slope or a wall?

Where the content stops matters less than how it stops. Microphones and instruments roll off gradually. A resampler's anti-aliasing filter, or a lossy codec's lowpass, drops like a cliff. A simple test: compare the band levels just below and just above the top. If the level falls by 25 dB or more within 1 kHz, it is a wall. No acoustic roll-off is that steep.

Rough patterns you will see:

A wall just under 22.05 kHz in a 96 kHz file: most likely upsampled from a 44.1 kHz source.
A wall somewhere around 16 to 20 kHz: the lowpass of a lossy codec such as MP3 or AAC, even if the file is now FLAC.
Energy tapering off gradually above 22 kHz: real ultrasonic content.

6. Be honest about what it can't prove

A spectrum is evidence, not proof. A native 96 kHz recording made with microphones or mastering that stop short of 22 kHz shows no ultrasonic content either, and a steep digital filter applied in mastering leaves the same wall that upsampling does. So word your results as evidence, for example "ultrasonic content found" or "lower-rate source likely". Avoid "genuine" and "fake".

It is also worth saying, since people will ask, that real content above 22 kHz does not automatically make a file sound better than a well-made 16-bit/44.1 kHz one.

Try it

The finished checker is free and runs entirely in the browser, with demo files for a native 96 kHz recording and an upsampled one: FLAC & Hi-Res Audio Checker. The other free audio tools I've made, including a tone generator, an ABX blind test and a set of calculators, are at theaudiostuff.com/tools/.

Jakub Charkiewicz, The Audio Stuff

Building a browser tone generator with the Web Audio API

The Audio Stuff — Mon, 26 Oct 2026 01:05:00 +0000

I built a free online tone generator for The Audio Stuff: sine, square, triangle and sawtooth tones, five colours of noise, frequency sweeps, a left/right channel test, a polarity click, and WAV export. Everything runs in the browser with the Web Audio API, no server and no libraries. Here are the building blocks, simplified, in case you want to make something similar.

1. Create the AudioContext on a user gesture

Browsers block audio until the user interacts with the page, so create (or resume) the context inside the click handler rather than on page load.

let ctx = null;

function audio() {
  ctx ??= new AudioContext();
  if (ctx.state === "suspended") ctx.resume();
  return ctx;
}

2. Tones: one OscillatorNode

The four classic waveforms are built in. Put a GainNode after the oscillator so you can control the level, and keep the level modest: a full-scale square wave is loud.

function playTone(freq, type = "sine", level = 0.2) {
  const a = audio();
  const osc = a.createOscillator();
  const gain = a.createGain();
  osc.type = type;            // "sine" | "square" | "triangle" | "sawtooth"
  osc.frequency.value = freq;
  gain.gain.value = level;
  osc.connect(gain).connect(a.destination);
  osc.start();
  return osc;                 // call osc.stop() later
}

3. Noise: fill a buffer and loop it

White noise is just random samples. Generate a couple of seconds into an AudioBuffer and loop it with an AudioBufferSourceNode.

function noiseBuffer(seconds = 2) {
  const a = audio();
  const buf = a.createBuffer(1, a.sampleRate * seconds, a.sampleRate);
  const data = buf.getChannelData(0);
  for (let i = 0; i < data.length; i++) data[i] = Math.random() * 2 - 1;
  return buf;
}

Pink noise (equal energy per octave, falling 3 dB per octave) needs filtering. A well-known approach is Paul Kellet's method: a handful of one-pole filters at different rates, summed. Brown noise (falling 6 dB per octave) is a leaky integrator over white noise. Both are a few lines inside the same loop, plus a gain correction so the levels stay comparable.

4. Sweeps: let the AudioParam do the work

You do not need a timer to sweep frequency. AudioParam automation is sample-accurate. An exponential ramp gives a logarithmic sweep, which spends equal time in each octave and is what you usually want for finding rattles and resonances.

function sweep(from = 20, to = 20000, seconds = 20) {
  const a = audio();
  const osc = a.createOscillator();
  const t = a.currentTime;
  osc.frequency.setValueAtTime(from, t);
  osc.frequency.exponentialRampToValueAtTime(to, t + seconds);
  osc.connect(a.destination);
  osc.start(t);
  osc.stop(t + seconds);
}

Use linearRampToValueAtTime instead if you want a linear sweep.

5. Left only, right only

To send a mono signal to one side, split and merge channels: route the signal into input 0 or 1 of a ChannelMergerNode.

function toSide(node, side) {          // side: "left" | "right"
  const a = audio();
  const merger = a.createChannelMerger(2);
  node.connect(merger, 0, side === "left" ? 0 : 1);
  merger.connect(a.destination);
}

6. A polarity click

A polarity test needs an asymmetric signal, so that a speaker wired in reverse is distinguishable. A short buffer with a strong positive step followed by a smaller decaying negative tail works well: about 20 ms is enough.

7. Visualise with an AnalyserNode

An AnalyserNode in the chain gives you time-domain or frequency data every animation frame for a scope or a spectrum display. An fftSize of 2048 is a reasonable default.

8. Export a WAV with OfflineAudioContext

To let people download a test tone, render it faster than real time with an OfflineAudioContext, then write a 44-byte RIFF header and 16-bit PCM samples with a DataView.

async function renderTone(freq, type, seconds = 5, rate = 44100) {
  const off = new OfflineAudioContext(1, rate * seconds, rate);
  const osc = off.createOscillator();
  osc.type = type;
  osc.frequency.value = freq;
  osc.connect(off.destination);
  osc.start();
  const rendered = await off.startRendering();
  return rendered.getChannelData(0);   // Float32Array, then encode as WAV
}

Things to watch out for

Clicks at start and stop. Starting or stopping an oscillator mid-cycle produces a click. A few milliseconds of gain ramp fixes it.
Safety. Test tones at high level can damage tweeters and hearing. Default to a low level and make users turn it up.
Square and sawtooth alias. The built-in oscillators are band-limited, but if you generate waveforms yourself at high frequencies, aliasing appears quickly.

You can try the finished tool here: Online Tone Generator. It sits alongside a speaker test, an ABX blind test, an FFT spectrum checker and a set of audio calculators, all free and client-side, at theaudiostuff.com/tools/.

Jakub Charkiewicz, The Audio Stuff