DEV Community: monkeymore studio

I Ported a C Audio Effects Engine to JavaScript So You Can Generate Weird Noises in Your Browser

monkeymore studio — Wed, 22 Apr 2026 02:59:18 +0000

There's something oddly satisfying about generating noise. Not random MP3s — actual algorithmic noise. White noise with a flanger. Distorted static. A growling bass sound made from nothing but random numbers and math. Most people don't have a C compiler and a DSP textbook handy, so I ported an entire audio effects engine from C to JavaScript and wrapped it in a web interface.

The result is a browser-based noise generator with 11 different audio effects — from simple echo to a phase-locked loop that tries to lock onto the chaos. You can tweak four parameters per effect, preview for 3 seconds, or export up to 10 minutes as an MP3. No servers, no uploads, no plugins.

Try it on our free noise generator.

Why Do This in the Browser?

Audio synthesis and DSP (digital signal processing) is traditionally the domain of C, C++, and dedicated audio software. But the Web Audio API and modern JavaScript engines are fast enough to run real-time DSP. Keeping it in the browser means:

Instant access — no DAW, no VST plugins, no compiler
Privacy — your noise stays on your machine
Portability — works on any device with a browser
Shareability — export an MP3 and send it anywhere

The Architecture: A C-to-JS Port

This isn't a wrapper around Web Audio API nodes. It's a from-scratch port of a C audio processing pipeline. The original code used file I/O (read()/write() system calls) to process raw audio through effect chains. We replaced the file input with Math.random() and the file output with Web Audio API buffers.

The core DSP code lives in three self-written modules:

white_noise.js — input generation and I/O translation layer
audio_effects.js — the full effects engine (980 lines of ported C)
noise-generator.ts — the React-facing TypeScript wrapper

Generating White Noise

The input to the pipeline isn't a recording — it's pure white noise generated on the fly:

for (let i = 0; i < BLOCKSIZE; i++) {
    input[i] = ((Math.random() * 2.0 - 1.0) * 0x7FFFFFFF) | 0;
}

Each sample is a 32-bit signed integer ranging from -0x7FFFFFFF to +0x7FFFFFFF. Using integer math (rather than float) preserves the exact behavior of the original C code, which was written for fixed-point DSP hardware.

The Noise Gate

Before hitting the effect, the signal passes through a noise gate in process_input. This isn't for gating silence — it's a dynamic range tracker that adapts to the signal magnitude:

function process_input(sample) {
    if (sample > process_input.max) process_input.max = sample;
    if (sample < process_input.min) process_input.min = sample;
    magnitude = process_input.max - process_input.min;

    // Exponential decay of max/min tracking
    process_input.max -= (process_input.max >> 12) + 1;
    process_input.min -= (process_input.min >> 12) - 1;

    // Adaptive noise gate threshold
    if (magnitude >> 22) {
        process_input.noise_gate *= 1.001;
        if (process_input.noise_gate > max_gate)
            process_input.noise_gate = max_gate;
    } else {
        process_input.noise_gate *= 0.999;
        if (process_input.noise_gate < min_gate)
            process_input.noise_gate = min_gate;
    }

    return sample * process_input.noise_gate;
}

The gate has a half-life of roughly 3,000 samples (~60ms at 48kHz). It expands when the signal is loud and contracts when it's quiet, giving the effects a more responsive feel.

Output Clipping

After the effect processes the sample, process_output converts back to 32-bit integers with overflow protection:

function process_output(out) {
    let sample = (out * FLOAT_TO_SAMPLE_MULTIPLIER) | 0;
    if (out >= 0) {
        if (sample < 0) sample = 0x7fffffff;
    } else {
        if (sample > 0) sample = 0x80000000;
    }
    return sample;
}

This catches floating-point overflows that would otherwise wrap around and create digital artifacts.

The Effects Engine

The heart of the tool is audio_effects.js — a 980-line port of a C effects framework. It includes shared DSP primitives and 11 distinct effects.

Shared Primitives

Fast Sine/Cosine Lookup

Instead of calling Math.sin() (relatively slow in tight loops), the engine uses a 256-entry quarter-sine table with linear interpolation:

const QUARTER_SINE_STEPS = 256;
const quarter_sin = new Float32Array([/* 257 precomputed values */]);

function fastsincos(phase) {
    phase *= 4;
    let quadrant = phase | 0;
    phase -= quadrant;
    phase *= QUARTER_SINE_STEPS;
    let idx = phase | 0;
    phase -= idx;
    let a = quarter_sin[idx];
    let b = quarter_sin[idx + 1];
    let x = a + (b - a) * phase;
    // ...quadrant handling for sin/cos
    return { sin: x, cos: y };
}

This is accurate to about 5 digits — more than enough for audio LFOs.

LFO (Low-Frequency Oscillator)

Three waveforms are implemented: sine, triangle, and sawtooth. The LFO phase is stored as a 32-bit unsigned integer that wraps naturally on overflow:

function lfo_step(lfo, type) {
    let now = lfo.idx >>> 0;
    let next = (now + lfo.step) >>> 0;
    lfo.idx = next;

    if (type === lfo_sawtooth) return u32_to_fraction(now);

    let quarter = now >>> 30;
    now = (now << 2) >>> 0;
    if (quarter & 1) now = ~now;

    if (type === lfo_sinewave) {
        let idx = now >>> (32 - QUARTER_SINE_STEP_SHIFT);
        let a = quarter_sin[idx];
        let b = quarter_sin[idx + 1];
        now = (now << QUARTER_SINE_STEP_SHIFT) >>> 0;
        return a + (b - a) * u32_to_fraction(now);
    } else {
        let val = u32_to_fraction(now);
        if (quarter & 2) val = -val;
        return val;
    }
}

The frequency is set by adjusting the step value, which represents how much the 32-bit phase accumulator advances per sample.

Biquad Filters

Second-order IIR filters for low-pass, high-pass, band-pass, notch, and all-pass:

function biquad_step_df1(c, in_, x, y) {
    let out = c.b0 * in_ + c.b1 * x[0] + c.b2 * x[1] - c.a1 * y[0] - c.a2 * y[1];
    x[1] = x[0]; x[0] = in_;
    y[1] = y[0]; y[0] = out;
    return out;
}

The coefficients are computed from cutoff frequency and Q factor using standard bilinear transform formulas. These filters are used throughout the effects for tone shaping.

Ring Buffer for Delay Effects

A 65,536-sample circular buffer provides up to ~1.25 seconds of delay at 48kHz:

const SAMPLE_ARRAY_SIZE = 65536;
const SAMPLE_ARRAY_MASK = SAMPLE_ARRAY_SIZE - 1;
const sample_array = new Float32Array(SAMPLE_ARRAY_SIZE);
let sample_array_index = 0;

function sample_array_write(val) {
    let idx = SAMPLE_ARRAY_MASK & (++sample_array_index);
    sample_array[idx] = val;
}

function sample_array_read(delay) {
    let i = delay | 0;
    let frac = delay - i;
    let idx = sample_array_index - i;
    let a = sample_array[SAMPLE_ARRAY_MASK & idx];
    let b = sample_array[SAMPLE_ARRAY_MASK & (++idx)];
    return a + (b - a) * frac;
}

Linear interpolation on fractional delays prevents zipper noise when the delay time modulates.

The 11 Effects

1. Pure White Noise

No effect. Just the raw noise gate output. Useful for sleep sounds, sound masking, or as a baseline for comparison.

2. Echo

A simple feedback delay line:

function echo_step(in_) {
    let d = 1 + effect_delay;
    let out = sample_array_read(d);
    sample_array_write(limit_value(in_ + out * effect_feedback));
    return (in_ + out) / 2;
}

Parameters control delay time (0–1000ms), LFO rate, LFO depth, and feedback amount. High feedback creates endless decaying repeats.

3. Flanger

A modulated delay with feedback. The delay time sweeps sinusoidally, creating the characteristic "jet plane" sweep:

function flanger_step(in_) {
    let d = 1 + effect_delay * (1 + lfo_step(effect_lfo, lfo_sinewave) * effect_depth);
    let out = sample_array_read(d);
    sample_array_write(limit_value(in_ + out * effect_feedback));
    return (in_ + out) / 2;
}

4. Phaser

A series of all-pass filters modulated by a triangle LFO. All-pass filters shift phase without changing amplitude; when mixed with the dry signal, they create notches in the spectrum:

function phaser_step(in_) {
    let lfo = lfo_step(phaser.lfo, lfo_triangle);
    let freq = pow2(lfo * phaser.octaves) * phaser.center_f;
    _biquad_allpass_filter(phaser.coeff, freq, phaser.Q);

    let out = in_ + phaser.feedback * phaser.s3[0];
    out = biquad_step_df1(phaser.coeff, out, phaser.s0, phaser.s1);
    out = biquad_step_df1(phaser.coeff, out, phaser.s1, phaser.s2);
    out = biquad_step_df1(phaser.coeff, out, phaser.s2, phaser.s3);

    return limit_value(in_ + out);
}

Four cascaded all-pass stages create a rich, sweeping texture.

5. Distortion

Three clipping modes with a post-filter tone control:

function distortion_step(in_) {
    let driven = in_ * distortion.drive; // 1x to 50x gain
    let shaped;
    switch (distortion.mode) {
        case 0: shaped = soft_clip(driven); break;      // x / (1 + |x|)
        case 1: shaped = hard_clip(driven); break;      // clamp to [-1, 1]
        case 2: shaped = asymmetric_clip(driven); break; // different + / -
    }
    let filtered = biquad_step(distortion.tone_filter, shaped);
    return filtered * distortion.level;
}

Soft clip is tube-like. Hard clip is fuzz-pedal aggressive. Asymmetric clip simulates rectifier distortion.

6. Tube

A simplified tube amp emulation using a power-law nonlinearity:

function tube_step(in_) {
    in_ *= tube.boost; // 1x to 20x pre-gain
    if (in_ + 1 > 0)
        in_ = Math.pow(in_ + 1, 1.5) - 1; // Tube warmth curve
    else
        in_ = -1;
    in_ *= tube.volume;
    in_ = biquad_step(tube.bass, in_);   // High-pass tone control
    in_ = biquad_step(tube.treble, in_); // Low-pass tone control
    return in_;
}

The pow(x+1, 1.5) - 1 curve mimics the gradual saturation of a vacuum tube.

7. AM (Amplitude Modulation)

A carrier sine wave multiplied by a modulator sine wave:

function am_step(in_) {
    let val = lfo_step(am.base_lfo, lfo_sinewave);
    let mod = lfo_step(am.mod_lfo, lfo_sinewave);
    let multiplier = 1 + mod * am.depth;
    return val * multiplier * am.volume;
}

Creates tremolo-like pulsing or metallic ring-modulator sounds depending on the frequency ratio.

8. FM (Frequency Modulation)

A sine wave whose frequency is modulated by another sine wave:

function fm_step(in_) {
    let lfo = lfo_step(modulator_lfo, lfo_sinewave);
    let multiplier = pow2(lfo * fm_freq_range);
    let freq = fm_base_freq * multiplier;
    set_lfo_freq(base_lfo, freq);
    return lfo_step(base_lfo, lfo_sinewave) * fm_volume;
}

This is classic FM synthesis à la Yamaha DX7, but applied to noise as the modulator source. The result is glassy, bell-like tones emerging from the static.

9. Growling Bass

A complex effect that extracts odd and even harmonics from the input through hard clipping, then mixes them back with a sub-octave component:

function growlingbass_step(in_) {
    let filtered_in = biquad_step(growlingbass.lpf_in, in_);
    let shaped_odd = hard_clip_growlingbass(filtered_in, previous_minmax);
    let shaped_even = Math.abs(in_);

    // Sub-octave generation via zero-crossing counting
    if ((sign - previous_sign) > 1.0) {
        nperiods += 1;
        previous_minmax = minmax;
        minmax = 0;
    }
    if (sign > 0.0) {
        shaped_sub = (nperiods % 2 === 0) ? filtered_in : -filtered_in;
    }

    let filtered_odd = biquad_step(growlingbass.lpf_odd, shaped_odd);
    let filtered_even = biquad_step(growlingbass.lpf_even, shaped_even);

    return shaped_sub * level_sub + in_ + filtered_odd * level_odd + filtered_even * level_even;
}

The sub-octave is generated by flipping polarity every other zero-crossing — a classic analog octave-pedal technique.

10. PLL (Phase-Locked Loop)

The most esoteric effect. It tries to track the dominant frequency in the noise by detecting zero-crossings and using a VCO (voltage-controlled oscillator) to generate a synchronized output:

function pll_step(in_) {
    let amplitude = pll_amplitude(in_);
    let clean_in = biquad_step(pll.lpf, in_);

    // Zero-crossing detection
    if (!pll.is_high && clean_in > threshold) {
        pll.is_high = 1;
        let current_freq = SAMPLES_PER_SEC / pll.samples_since_cross;
        if (current_freq > 20.0 && current_freq < 2000.0)
            pll.smoothed_freq = linear(0.1, pll.smoothed_freq, current_freq);
        pll.samples_since_cross = 0;
    }

    // VCO tracking
    let phase_error = clean_in * cos_out;
    let vco_freq = pll.smoothed_freq + (phase_error * pll.smoothed_freq * 0.5);
    set_lfo_freq(pll.tracking, vco_freq);
    set_lfo_freq(pll.output, vco_freq * 4);

    let out = amplitude * lfo_step(pll.output, lfo_triangle);
    return linear(pll.blend, in_, out);
}

When it works, it pulls a coherent pitched tone out of random noise. When it doesn't, it produces chaotic, glitchy artifacts. Both are musically interesting.

11. Discontinuous

A granular-style effect that reads from two points in the delay buffer, modulated by a sine LFO:

function discont_step(in_) {
    let i = ((disco.lfo.idx << 1) >>> 0) >>> (32 - DISCONT_SHIFT);
    let ni = (i + DISCONT_STEPS / 2) & (DISCONT_STEPS - 1);
    let sin = lfo_step(disco.lfo, lfo_sinewave);

    sample_array_write(in_);
    sin *= sin; // Square the sine for smoother crossfade
    let d1 = sample_array_read(delay - i * step) * sin;
    let d2 = sample_array_read(delay - ni * step) * (1 - sin);

    return d1 + d2;
}

The "discontinuous" name comes from the sudden jumps in read position as the LFO sweeps, creating stuttering, fragmented textures.

Exporting to MP3

Once the noise is generated (as a Float32Array interleaved stereo buffer), the export path is the same as the MIDI-to-MP3 tool:

const left = new Int16Array(audioData.length / 2);
const right = new Int16Array(audioData.length / 2);
for (let i = 0; i < audioData.length / 2; i++) {
    const l = Math.max(-1, Math.min(1, audioData[i * 2]));
    left[i] = l < 0 ? l * 0x8000 : l * 0x7FFF;
    const r = Math.max(-1, Math.min(1, audioData[i * 2 + 1]));
    right[i] = r < 0 ? r * 0x8000 : r * 0x7FFF;
}

const lame = await loadLamejs();
const encoder = new lame.Mp3Encoder(2, SAMPLE_RATE, 192);
const mp3Data = encoder.encodeBuffer(left, right);
const mp3End = encoder.flush();
const mp3Blob = new Blob([mp3Data, mp3End], { type: 'audio/mp3' });

The loadLamejs function injects lame.min.js via a script tag to avoid bundler issues with the library's implicit global dependencies.

Why Port C Code Instead of Using Web Audio API Nodes?

The Web Audio API has built-in nodes for delay, biquad filters, waveshapers, and oscillators. We could have built the effects chain using those. But porting the C code gives us several advantages:

Exact behavior preservation — The effects sound exactly like the original C implementation, down to the fixed-point quirks and noise gate behavior.
Offline rendering — We can generate any duration of audio without real-time constraints. A 10-minute file renders in seconds, not 10 minutes.
Parameter granularity — Every internal variable is exposed. We can tweak LFO waveforms, filter Q values, and clipping thresholds with full control.
Educational value — The code shows how real DSP algorithms work under the hood, not just how to connect pre-built audio nodes.

Try It Yourself

Need a 10-minute white noise track for sleeping? Want to see what a phase-locked loop does when fed pure static? Curious how FM synthesis sounds when the carrier is random noise?

Head over to our free noise generator. Pick an effect, tweak the knobs, hit Preview, and if you like what you hear, export it as an MP3. All the math happens in your browser — no data leaves your device.

Turn Your MIDI Files Into MP3 Audio — Pick Any Instrument You Want

monkeymore studio — Wed, 22 Apr 2026 02:58:25 +0000

MIDI files are great for editing, but terrible for sharing. Try sending a .mid file to a friend and watch them struggle to open it. Most phones don't have MIDI players. Social platforms don't support MIDI uploads. What you actually need is an MP3 — something that plays everywhere.

The usual workflow involves opening a DAW, loading a SoundFont, bouncing to audio, and then compressing. That's a lot of steps for something that should be simple. I built a browser tool that handles the entire pipeline: upload a MIDI or MusicXML file, pick an instrument from 28 options ranging from grand piano to 8-bit chiptune, and download a properly encoded MP3. No software installation, no account, no uploads to a server.

Try it out on our free MIDI to MP3 converter.

Why Keep This in the Browser?

Audio rendering is traditionally a desktop task. But forcing users to install a DAW just to convert a MIDI ringtone is absurd.

Zero Network Uploads

Your MIDI file stays on your device. The synthesis, rendering, and MP3 encoding all happen inside your browser's JavaScript engine. There's no cloud server processing your music, no queue, no "we'll email you when it's done."

Instant and Unlimited

A typical 3-minute MIDI file converts in under 10 seconds. There's no daily limit, no watermark, no premium tier. Convert as many files as you want.

Cross-Platform

Because it runs in a browser, it works on macOS, Windows, Linux, ChromeOS, even tablets. The only requirement is a modern browser with Web Audio API support.

The Full Pipeline

Here's what happens from file drop to MP3 download:

Let's walk through each stage.

Parsing MIDI and MusicXML

The tool accepts both formats. MIDI is parsed with @tonejs/midi:

async function parseMidiFile(file: File): Promise<NoteEvent[]> {
  const { Midi } = await import('@tonejs/midi');
  const arrayBuffer = await file.arrayBuffer();
  const midi = new Midi(arrayBuffer);
  const track = midi.tracks.find((t) => t.notes.length > 0);
  if (!track) return [];
  return track.notes.map((n) => ({
    time: n.time,
    duration: n.duration,
    note: n.name,
    velocity: n.velocity,
  }));
}

MusicXML is parsed with the browser's built-in DOMParser:

function parseMusicXML(xmlText: string): NoteEvent[] {
  const parser = new DOMParser();
  const doc = parser.parseFromString(xmlText, 'application/xml');
  const parserError = doc.querySelector('parsererror');
  if (parserError) throw new Error('Invalid MusicXML file');

  const notes: NoteEvent[] = [];
  const parts = doc.querySelectorAll('part');
  let globalBpm = 120;

  for (const part of parts) {
    const measures = part.querySelectorAll('measure');
    let divisions = 4;
    let measureTime = 0;

    for (const measure of measures) {
      const attr = measure.querySelector('attributes');
      if (attr) {
        const divElem = attr.querySelector('divisions');
        if (divElem) divisions = parseInt(divElem.textContent || '4');
      }
      const soundTempo = measure.querySelector('sound[tempo]');
      if (soundTempo) {
        globalBpm = parseInt(soundTempo.getAttribute('tempo') || '120');
      }

      const measureNotes = measure.querySelectorAll('note');
      let currentTick = 0;
      let lastNoteTime = 0;

      for (const note of measureNotes) {
        const durationTicks = parseInt(note.querySelector('duration')?.textContent || '0');
        const isChord = note.querySelector('chord') !== null;
        const isRest = note.querySelector('rest') !== null;

        if (isChord) {
          const noteDuration = (durationTicks / divisions) * (60 / globalBpm);
          notes.push({ time: lastNoteTime, duration: noteDuration, note: noteName, velocity: 0.8 });
        } else {
          if (isRest) { currentTick += durationTicks; continue; }
          const noteDuration = (durationTicks / divisions) * (60 / globalBpm);
          lastNoteTime = measureTime + (currentTick / divisions) * (60 / globalBpm);
          notes.push({ time: lastNoteTime, duration: noteDuration, note: noteName, velocity: 0.8 });
          currentTick += durationTicks;
        }
      }
      measureTime += (currentTick / divisions) * (60 / globalBpm);
    }
  }
  return notes;
}

Both parsers produce the same output: an array of NoteEvent objects with time (seconds), duration (seconds), note (e.g., "C4"), and velocity (0–1).

The Instrument Engine: 28 Sounds, Zero Samples

Unlike the MIDI player which uses SoundFont samples, this converter uses Tone.js's built-in synthesizers. That means no external sample downloads, no loading spinners, and instant instrument switching. The trade-off is that the sounds are synthesized rather than sampled — more like a vintage keyboard than a concert grand.

Instrument Configuration

We define 28 instruments with specific oscillator types and envelope settings:

const INSTRUMENTS: Instrument[] = [
  { id: 'piano', name: 'Piano', type: 'triangle', envelope: { attack: 0.005, decay: 0.3, sustain: 0.1, release: 1.2 } },
  { id: 'strings', name: 'Strings', type: 'sawtooth', envelope: { attack: 0.2, decay: 0.3, sustain: 0.6, release: 1.5 } },
  { id: 'flute', name: 'Flute', type: 'sine', envelope: { attack: 0.05, decay: 0.2, sustain: 0.6, release: 0.8 } },
  { id: 'guitar', name: 'Guitar', type: 'square', envelope: { attack: 0.001, decay: 0.4, sustain: 0.1, release: 0.8 } },
  { id: 'fm', name: 'FM Synth', synthType: 'fm', volume: -6 },
  { id: 'pluck', name: 'Pluck Synth', synthType: 'pluck', volume: -3 },
  // ...and 22 more
];

Most instruments use Tone.PolySynth(Tone.Synth) with a custom oscillator type (triangle, sawtooth, sine, square) and ADSR envelope. The envelope shapes the sound over time:

Piano: Fast attack (5ms), medium decay, low sustain, long release — mimics a struck string
Strings: Slow attack (200ms), high sustain, long release — mimics a bowed instrument
Guitar: Instant attack, short sustain, medium release — plucked character
Pad: Very slow attack (800ms), high sustain, very long release (2s) — ambient swells

Specialized Synthesizers

For more exotic sounds, we use Tone.js's advanced synths:

FM Synth uses frequency modulation for bell-like, metallic tones:

synth = new Tone.PolySynth(Tone.FMSynth, {
  harmonicity: 3,
  modulationIndex: 10,
  oscillator: { type: 'sine' },
  envelope: { attack: 0.01, decay: 0.2, sustain: 0.3, release: 0.5 },
  modulation: { type: 'square' },
  modulationEnvelope: { attack: 0.01, decay: 0.2, sustain: 0.3, release: 0.5 },
});

Pluck Synth uses a Karplus-Strong physical model for string sounds:

synth = new Tone.PolySynth(Tone.PluckSynth, {
  attackNoise: 1,
  dampening: 4000,
  resonance: 0.7,
});

Duo Synth stacks two detuned voices for a rich, chorused sound:

synth = new Tone.PolySynth(Tone.DuoSynth, {
  vibratoAmount: 0.5,
  vibratoRate: 5,
  harmonicity: 1.5,
  voice0: { oscillator: { type: 'sine' }, envelope: { attack: 0.01, decay: 0.2, sustain: 0.3, release: 0.5 } },
  voice1: { oscillator: { type: 'sine' }, envelope: { attack: 0.01, decay: 0.2, sustain: 0.3, release: 0.5 } },
});

Mono Synth adds a filter envelope for squelchy bass sounds:

synth = new Tone.PolySynth(Tone.MonoSynth, {
  oscillator: { type: 'sawtooth' },
  envelope: { attack: 0.01, decay: 0.3, sustain: 0.6, release: 0.4 },
  filterEnvelope: { attack: 0.01, decay: 0.3, sustain: 0.5, release: 0.4, baseFrequency: 200, octaves: 3, exponent: 2 },
});

Offline Rendering: Synthesizing Without Sound

Here's the trick that makes this whole thing possible. We need to generate audio, but we don't want to play it through speakers in real time. We want to render it faster-than-realtime and capture the output as a buffer. Tone.js provides Tone.Offline exactly for this:

const buffer = await Tone.Offline(({ transport }: any) => {
  // Create the synthesizer based on selected instrument
  let synth: any;
  if (instrument?.synthType === 'fm') {
    synth = new Tone.PolySynth(Tone.FMSynth, { /* ... */ }).toDestination();
  } else if (instrument?.synthType === 'pluck') {
    synth = new Tone.PolySynth(Tone.PluckSynth, { /* ... */ }).toDestination();
  } else {
    synth = new Tone.PolySynth(Tone.Synth, {
      oscillator: { type: instrument?.type || 'triangle' },
      envelope: instrument?.envelope || { attack: 0.02, decay: 0.1, sustain: 0.3, release: 1 },
    }).toDestination();
  }
  synth.volume.value = instrument?.volume ?? -6;

  // Schedule all notes
  const partData = notes.map((n) => [n.time, { note: n.note, duration: n.duration, velocity: n.velocity }]);
  const part = new Tone.Part((time: number, value: any) => {
    synth.triggerAttackRelease(value.note, value.duration, time, value.velocity);
  }, partData);
  part.start(0);
  transport.start();
}, totalDuration, 2, 44100);

The parameters to Tone.Offline are:

totalDuration — how long to render (slightly longer than the last note)
2 — number of channels (stereo)
44100 — sample rate (CD quality)

Inside the callback, everything works exactly like real-time playback — we create synths, schedule parts, and start transport. But instead of going to speakers, the audio is written to an offline buffer. A 3-minute song renders in about 5–10 seconds, depending on your CPU.

Encoding to MP3 with lamejs

Once we have a raw audio buffer, we need to compress it to MP3. We use lamejs, a pure-JavaScript port of the LAME encoder.

The Loading Problem and Our Solution

lamejs has a quirk: its source files have implicit global dependencies that break in modern bundlers like Webpack and Turbopack. Importing it as an npm module causes "XXX is not defined" errors at runtime.

Our solution is a lightweight polyfill loader that injects the pre-built lame.min.js via a script tag:

export async function loadLamejs(): Promise<{ Mp3Encoder: any; WavHeader: any } | null> {
  if (typeof window === 'undefined') return null;

  const win = window as any;
  if (win.lamejs?.Mp3Encoder) {
    return win.lamejs;
  }

  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = '/lame.min.js';
    script.async = true;
    script.onload = () => {
      if (win.lamejs?.Mp3Encoder) {
        resolve(win.lamejs);
      } else {
        reject(new Error('lamejs loaded but Mp3Encoder not found'));
      }
    };
    script.onerror = () => reject(new Error('Failed to load lame.min.js'));
    document.head.appendChild(script);
  });
}

The minified file (~156 KB) is served from the public directory. Because it runs in the global scope, all internal dependencies resolve correctly within the same closure.

Float32 to Int16 Conversion

The Web Audio API uses Float32 samples in the range [-1, 1]. LAME expects 16-bit signed integers. We convert:

const sampleRate = buffer.sampleRate;
const left = buffer.getChannelData(0);
const right = buffer.numberOfChannels > 1 ? buffer.getChannelData(1) : left;
const leftInt = new Int16Array(left.length);
const rightInt = new Int16Array(right.length);

for (let i = 0; i < left.length; i++) {
  const l = Math.max(-1, Math.min(1, left[i]));
  leftInt[i] = l < 0 ? l * 0x8000 : l * 0x7FFF;
  const r = Math.max(-1, Math.min(1, right[i]));
  rightInt[i] = r < 0 ? r * 0x8000 : r * 0x7FFF;
}

Clamping to [-1, 1] prevents overflow. Negative values map to [-32768, 0) and positive values map to [0, 32767].

MP3 Encoding

const encoder = new Mp3Encoder(2, sampleRate, 192);
const mp3Data = encoder.encodeBuffer(leftInt, rightInt);
const mp3End = encoder.flush();
const mp3Blob = new Blob([mp3Data, mp3End], { type: 'audio/mp3' });

We encode in stereo at 192 kbps — a good balance between quality and file size. For reference, that's roughly 1.4 MB per minute of audio. The encodeBuffer call processes the entire audio in one shot (fine for short files; longer files could be chunked to avoid memory spikes). Finally, flush() writes the MP3 tail frames including the Xing/VBR header.

Downloading the Result

The MP3 blob is converted to an object URL and triggered as a download:

const url = URL.createObjectURL(mp3Blob);
const a = document.createElement('a');
a.href = url;
a.download = `${baseName}.mp3`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);

No server round-trip. The file goes straight from JavaScript memory to your Downloads folder.

Why Synthesizers Instead of SoundFonts?

The MIDI player in the same project uses SoundFont samples for realistic instrument sounds. This converter deliberately uses synthesizers instead. Here's why:

No network requests — SoundFonts require downloading sample files (even sparse sets are ~1-2 MB per instrument). Synthesizers generate audio mathematically, so there's nothing to download.
Instant switching — Changing from piano to FM synth is just a dropdown change. No loading spinner, no cache management.
Smaller bundle — The converter doesn't need Tone.js Sampler or base URL configuration. The core Tone.js synth code is already included.
Creative sounds — You can't get an FM synth or a pluck synth from a SoundFont. The synthesized options offer textures that sampled instruments can't match.

The trade-off is realism. If you want a believable grand piano, use the MIDI player with its SoundFont piano. If you want a quick MP3 export with a pleasant synthetic sound, this converter is perfect.

Try It Yourself

Got a MIDI file from an old keyboard? A MusicXML export from a notation app? Something you downloaded from a retro gaming site?

Upload it to our free MIDI to MP3 converter. Pick an instrument — maybe piano for a classical piece, strings for something cinematic, or chiptune if you're feeling nostalgic. Hit Export and get a real MP3 file that plays on any device.

All synthesis and encoding happens locally in your browser. Your files never leave your machine.

A MIDI Player That Shows You the Sheet Music and Lets You Play Along on a Virtual Piano

monkeymore studio — Wed, 22 Apr 2026 02:57:29 +0000

Most MIDI players are just glorified MP3 players with a progress bar. You hit play, you hear music, and that's it. But what if you actually want to see what's being played? What notes, what chords, what key signature? And what if you want to play along?

I built a browser-based MIDI and MusicXML player that does all of that. It renders proper sheet music from your file, highlights each note as it's played, displays a virtual piano keyboard that lights up in real time, and lets you switch between 28 different instruments — from grand piano to shanai. All without uploading a single byte to a server.

Try it out on our free online MIDI player.

Why Build This in the Browser?

MIDI files are small, but they're not audio. They're instructions. To hear them, you need a synthesizer. To see them, you need a notation renderer. Most tools only do one or the other. Desktop apps that do both (like MuseScore) are powerful but heavyweight. Online sequencers force you to create accounts and upload your files.

A browser-based player solves all of this:

No uploads — your MIDI files stay on your device
No installation — works on any device with a modern browser
Instant playback — the synthesizer loads in seconds
Visual feedback — see the notes on a staff and a piano keyboard simultaneously

The Full Pipeline

Here's what happens from file drop to playback:

Dual Format Support: MIDI and MusicXML

The player accepts two formats. MIDI is the universal language of digital music — compact, widely supported, but not human-readable. MusicXML is the standard for sheet music exchange — verbose, but carries notation semantics that MIDI simply doesn't have (like ties, beams, and articulations).

Parsing MIDI

For MIDI files, we use @tonejs/midi to decode the binary format:

const { Midi } = await import('@tonejs/midi');
const arrayBuffer = await selectedFile.arrayBuffer();
const midi = new Midi(arrayBuffer);
const track = midi.tracks.find((t) => t.notes.length > 0);

const parsedNotes = track.notes.map((n) => ({
  time: n.time,
  duration: n.duration,
  note: n.name,
  velocity: n.velocity,
}));

This gives us a clean array of note events with timing in seconds, note names like "C4" or "F#5", and velocity values for dynamics.

Parsing MusicXML

For MusicXML, we use the browser's built-in DOMParser:

function parseMusicXML(xmlText: string): NoteEvent[] {
  const parser = new DOMParser();
  const doc = parser.parseFromString(xmlText, 'application/xml');
  const notes: NoteEvent[] = [];
  const parts = doc.querySelectorAll('part');
  let globalBpm = 120;

  for (const part of parts) {
    const measures = part.querySelectorAll('measure');
    let divisions = 4;
    let measureTime = 0;

    for (const measure of measures) {
      const attr = measure.querySelector('attributes');
      if (attr) {
        const divElem = attr.querySelector('divisions');
        if (divElem) divisions = parseInt(divElem.textContent || '4');
      }
      const soundTempo = measure.querySelector('sound[tempo]');
      if (soundTempo) {
        globalBpm = parseInt(soundTempo.getAttribute('tempo') || '120');
      }

      const measureNotes = measure.querySelectorAll('note');
      let currentTick = 0;
      let lastNoteTime = 0;

      for (const note of measureNotes) {
        const durationTicks = parseInt(note.querySelector('duration')?.textContent || '0');
        const isChord = note.querySelector('chord') !== null;
        const isRest = note.querySelector('rest') !== null;

        if (isChord) {
          // Same time as previous note, different pitch
          const noteDuration = (durationTicks / divisions) * (60 / globalBpm);
          notes.push({ time: lastNoteTime, duration: noteDuration, note: midiNoteName, velocity: 0.8 });
        } else {
          if (isRest) { currentTick += durationTicks; continue; }
          const noteDuration = (durationTicks / divisions) * (60 / globalBpm);
          lastNoteTime = measureTime + (currentTick / divisions) * (60 / globalBpm);
          notes.push({ time: lastNoteTime, duration: noteDuration, note: midiNoteName, velocity: 0.8 });
          currentTick += durationTicks;
        }
      }
      measureTime += (currentTick / divisions) * (60 / globalBpm);
    }
  }
  return notes;
}

The parser walks through each <part>, then each <measure>, extracting <note> elements. It handles <chord> tags (simultaneous notes), <rest> tags (silence), and <sound tempo> directives (BPM changes). Duration values are converted from MusicXML's division-based ticks into absolute seconds using the formula: (durationTicks / divisions) * (60 / BPM).

Converting MIDI to MusicXML for Rendering

MIDI files don't contain notation semantics. To render sheet music from a MIDI file, we need to generate MusicXML ourselves. The logic is similar to what we use in the MIDI-to-sheet tool:

function generateMusicXMLFromMidi(midi: any): string {
  const ppq = midi.header.ppq || 480;
  const timeSig = midi.header.timeSignatures[0] || { timeSignature: [4, 4] };
  const [beats, beatValue] = timeSig.timeSignature;
  const ticksPerMeasure = beats * (ppq * 4 / beatValue);

  // Group near-simultaneous notes into chords
  const chordTolerance = Math.max(1, Math.floor(ppq / 64));
  const events = [];
  for (const note of sortedNotes) {
    const existing = events.find(e => Math.abs(e.ticks - note.ticks) <= chordTolerance);
    if (existing) existing.notes.push(note);
    else events.push({ ticks: note.ticks, durationTicks: note.durationTicks, notes: [note] });
  }

  // Split into measures
  const measures = [];
  // ...measure splitting logic...

  // Build XML string
  return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<score-partwise version="3.1">
  <part id="P1">
    ${measuresXml}
  </part>
</score-partwise>`;
}

This ensures that whether you upload a MIDI or a MusicXML file, the sheet music viewer always has valid MusicXML to work with.

Rendering Sheet Music with OpenSheetMusicDisplay

Once we have MusicXML (either parsed directly or generated from MIDI), we render it using opensheetmusicdisplay (OSMD):

const osmd = new OpenSheetMusicDisplay(container, {
  autoResize: false,
  backend: 'svg',
  pageFormat: 'A4_P',
  cursorsOptions: [{ type: 0, color: '#3b82f6', alpha: 0.25, follow: true }],
});
await osmd.load(musicXml);
osmd.render();

OSMD produces beautiful SVG sheet music. We configure it for A4 portrait format with SVG backend for crisp scaling. The cursorsOptions sets up a blue semi-transparent cursor that follows playback — we'll drive this cursor programmatically.

Pagination

Long pieces don't fit on one screen. After rendering, we detect how many pages OSMD generated and show only one at a time:

const pageDivs = container.querySelectorAll('[id^="osmdCanvasPage"]');
const totalPages = pageDivs.length || 1;
pageDivs.forEach((div, idx) => {
  (div as HTMLElement).style.display = idx === 0 ? 'block' : 'none';
});

Navigation buttons let users flip between pages manually, but during playback, the page flips automatically as the cursor moves.

The Sound Engine: Real Instruments in Your Browser

Most browser-based MIDI players use cheap synthesized tones. We wanted real instrument sounds. The solution is Tone.js with SoundFont samples.

The Instrument System

We define 28 instruments, each mapping to a General MIDI SoundFont:

const SOUND_FONT_BASE_URL =
  "https://cdn.jsdelivr.net/gh/gleitz/midi-js-soundfonts@master/FluidR3_GM";

const SAMPLER_URLS = {
  C2: "C2.mp3", C3: "C3.mp3", C4: "C4.mp3",
  C5: "C5.mp3", C6: "C6.mp3", C7: "C7.mp3",
};

function createSampler(soundFontName: string, volumeDb = -6) {
  return (Tone: any) => {
    const sampler = new Tone.Sampler({
      urls: SAMPLER_URLS,
      baseUrl: `${SOUND_FONT_BASE_URL}/${soundFontName}-mp3/`,
    }).toDestination();
    sampler.volume.value = volumeDb;
    return sampler;
  };
}

Here's the clever part: we only load 6 samples per instrument — C2, C3, C4, C5, C6, C7. Tone.js's Sampler repitches these to cover the full 88-key range. This keeps load times fast (under a second per instrument) while still sounding realistic. The samples come from the public-domain FluidR3_GM SoundFont, hosted on jsDelivr CDN.

Playback Scheduling with Tone.js

Tone.js handles the timing. We group notes into chords and schedule them on a Tone.Part:

const chords = groupNotesToChords(notes);
const partData = chords.map((c) => [c.time, c]);

const part = new Tone.Part((time: number, chord: ChordEvent) => {
  synthRef.current?.triggerAttackRelease(
    chord.notes, chord.duration, time, chord.velocity
  );
  Tone.Draw.schedule(() => {
    advanceCursor();
  }, time);
}, partData);
part.start(0);
Tone.Transport.start();

Tone.Draw.schedule is the bridge between audio time and DOM updates. It ensures the sheet music cursor advances in sync with the audio, even during tempo changes or buffer underruns.

The Virtual Piano Keyboard

The player includes a fully interactive piano keyboard that shows which notes are currently sounding:

<PianoKeyboard
  activeNotes={activePianoNotes}
  instrument={instrument}
  onInstrumentChange={setInstrument}
/>

The keyboard has 36 white keys (C2 to C7) and 25 black keys. It's built with pure CSS — no images, no Canvas, just carefully positioned div elements with gradient backgrounds and box shadows to simulate the 3D depth of real piano keys.

Responsive Sizing

The keyboard adapts to its container width using a ResizeObserver:

const computeSize = useCallback(() => {
  if (!wrapRef.current) return;
  const width = wrapRef.current.clientWidth;
  const wkeyHeight = (width / 36) * 7;
  const bkeyHeight = wkeyHeight * 0.7;
  wrapRef.current.style.height = `${wkeyHeight}px`;
}, []);

White keys are 100/36 % wide. Black keys are absolutely positioned within octave groups at fixed percentage offsets (9%, 23%, 50%, 65%, 79%).

Keyboard Shortcuts

You can actually play the piano with your computer keyboard:

const handleKeyDown = (e: KeyboardEvent) => {
  const keyCode = e.keyCode;
  if (keyCode === 16) { enableBlackKeyRef.current = true; return; }
  let mappedKeyCode = String(keyCode);
  if (enableBlackKeyRef.current) mappedKeyCode = "b" + keyCode;
  playNoteByKeyCode(mappedKeyCode);
};

White keys: 1 through M (QWERTY row)
Black keys: Hold Shift + same keys
Example: T plays C4, Shift+T plays C#4

Active Note Highlighting

During playback, the activePianoNotes array drives the visual state:

const update = () => {
  const current = Tone.Transport.seconds;
  const active: string[] = [];
  pianoNoteEndTimesRef.current.forEach((endTime, note) => {
    if (current < endTime) active.push(note);
    else pianoNoteEndTimesRef.current.delete(note);
  });
  setActivePianoNotes(active);
};

Active keys turn yellow (#facc15), giving you immediate visual feedback of what's being played.

Sheet Music Synchronization: Following the Cursor

The most visually satisfying feature is the sheet music following playback. OSMD provides a cursor API, but we enhance it with note highlighting:

const advanceCursor = () => {
  const cursor = osmdRef.current.cursor;
  cursor.next();
  const notes = cursor.GNotesUnderCursor();

  // Auto-flip pages
  cursor.updateCurrentPage();
  const pageNum = cursor.currentPageNumber;
  if (pageNum && pageNum !== currentSheetPage) {
    showSheetPage(pageNum);
  }

  // Clear previous highlights
  clearNoteHighlights();

  // Highlight current notes in blue
  for (const note of notes) {
    const svgGroup = note.getSVGGElement?.();
    if (svgGroup) {
      svgGroup.querySelectorAll('path, ellipse, rect').forEach((el) => {
        // Save original styles
        el.dataset.osmdOrigStyleFill = el.style.fill || '';
        el.dataset.osmdOrigStyleStroke = el.style.stroke || '';
        // Apply highlight
        el.style.fill = '#3b82f6';
        el.style.stroke = '#2563eb';
      });
      highlightedNotesRef.current.push(note);
    }
  }
};

The highlight system is careful to preserve and restore original SVG styles. When playback moves to the next note group, clearNoteHighlights() walks through all previously highlighted elements and restores their original fill and stroke attributes. This prevents permanent color changes if playback is stopped mid-piece.

Instrument Switching on the Fly

Changing instruments mid-playback is handled gracefully. When the user selects a new instrument from the dropdown:

useEffect(() => {
  const oldSynth = synthRef.current;
  const config = getInstrumentConfig(instrument);
  const newSynth = config.createSynth(Tone);

  const swapWhenReady = () => {
    if (newSynth.loaded) synthRef.current = newSynth;
    else requestAnimationFrame(swapWhenReady);
  };
  swapWhenReady();

  // Delay disposing old synth so active notes can finish
  setTimeout(() => {
    try { oldSynth.dispose(); } catch {}
  }, 3000);
}, [instrument]);

The new sampler loads asynchronously. We swap the reference only when loaded is true, preventing "buffer not loaded" errors. The old synth hangs around for 3 seconds to let any releasing notes finish their decay envelope.

Edge Cases and Robustness

Real-world files are messy. The player handles several common issues:

Chord Detection

MIDI files often have slightly offset note-on times for chords due to quantization or performance timing. We group notes within a 20ms tolerance:

function groupNotesToChords(noteEvents: NoteEvent[]): ChordEvent[] {
  const timeTolerance = 0.02; // 20ms
  for (const note of sorted) {
    const existing = chords.find(
      (c) => Math.abs(c.time - note.time) < timeTolerance &&
            Math.abs(c.duration - note.duration) < timeTolerance
    );
    if (existing) existing.notes.push(note.note);
    else chords.push({ time: note.time, duration: note.duration, notes: [note.note], velocity: note.velocity });
  }
}

Multi-Part MusicXML

The parser walks through all <part> elements, so multi-instrument scores don't lose notes. Everything gets flattened into a single playback timeline.

Empty or Corrupted Files

Both MIDI and MusicXML parsers have validation. If @tonejs/midi throws or DOMParser returns a parser error, the user sees a clear message instead of a silent failure.

Why This Stack?

The architecture is intentionally pragmatic:

@tonejs/midi handles MIDI binary parsing — no need to reimplement SMF format
opensheetmusicdisplay provides professional notation rendering — no need to draw beams and stems by hand
Tone.js + SoundFont delivers realistic audio — no Web Audio oscillator noodling
Pure CSS piano keeps the bundle light — no Canvas or WebGL needed for the keyboard

Everything is loaded on demand via dynamic imports. The core page bundle is small; Tone.js, OSMD, and instrument samples only load when the user actually uploads a file.

Try It Yourself

Got a MIDI file from an old game soundtrack? A MusicXML export from Sibelius? Or just want to see what your composition looks like on a staff while hearing it played back with real piano samples?

Upload it to our free online MIDI player. Watch the notes scroll across the sheet music, light up on the virtual keyboard, and hear them played by a real sampled grand piano. Switch to guitar, flute, or music box if you're feeling whimsical. It's all happening right in your browser.

I Built an Audio-to-MIDI Converter That Runs on Your Laptop — Using Spotify's AI

monkeymore studio — Wed, 22 Apr 2026 02:54:38 +0000

Have you ever listened to a melody and thought, "I wish I had the sheet music for that"? Or maybe you recorded a guitar riff on your phone and now you want to edit it in a DAW as MIDI notes. The usual options aren't great: expensive transcription software, sketchy online upload tools, or doing it by ear like it's 1995.

I built something better. It's a free audio-to-MIDI converter that runs a machine learning model — based on Spotify's open-source Basic Pitch — entirely inside your web browser. Drop in an MP3, WAV, FLAC, or M4A file, wait a few seconds while the AI listens, and download a MIDI file you can open in any notation or production software.

No uploads. No servers. Your audio never leaves your machine. Try it on our free audio to MIDI converter.

Why Run AI in the Browser?

Machine learning transcription sounds like a server job. But forcing users to upload audio to a remote GPU cluster introduces problems that are easy to overlook.

Your Audio Stays Private

Maybe it's an unreleased song. Maybe it's a voice memo with personal content. Maybe you just don't trust random websites with your files. When the model runs locally, none of those concerns exist. The audio is decoded, analyzed, and discarded — all inside your browser's memory.

No API Keys, No Rate Limits, No Quotas

Server-side ML inference costs money. Most services pass that cost to users through subscription tiers, per-minute fees, or daily limits. A local model is free forever, for unlimited files, with no account required.

Works Offline After First Load

The AI model downloads once (about 900 KB), then caches in your browser. After that, you can transcribe audio even without an internet connection. Plane ride? Studio session with no Wi-Fi? Doesn't matter.

How the Pipeline Works

Here's the journey from a raw audio file to a downloadable MIDI:

Let's dig into each step.

Audio Preprocessing: Getting the Signal Ready

Neural networks are picky about input. The Basic Pitch model expects audio at exactly 22,050 Hz, mono, as a Float32Array. Your uploaded file could be a 48 kHz stereo WAV or a 44.1 kHz MP3. We need to normalize it.

Decoding with the Web Audio API

async function prepareAudio(arrayBuffer: ArrayBuffer): Promise<Float32Array> {
  const targetSampleRate = 22050;
  const audioCtx = new (window.AudioContext || (window as any).webkitAudioContext)();
  const decoded = await audioCtx.decodeAudioData(arrayBuffer.slice(0));
  await audioCtx.close();
  // ...
}

decodeAudioData is the browser's built-in audio decoder. It handles MP3, WAV, OGG, FLAC, and M4A automatically. No external codecs needed. We immediately close the AudioContext afterward to free up the audio thread — we're done with playback; we just needed the raw samples.

Mixing to Mono

Stereo files get averaged down to a single channel:

const numChannels = decoded.numberOfChannels;
const originalLength = decoded.length;
const monoData = new Float32Array(originalLength);

for (let i = 0; i < originalLength; i++) {
  let sum = 0;
  for (let ch = 0; ch < numChannels; ch++) {
    sum += decoded.getChannelData(ch)[i];
  }
  monoData[i] = sum / numChannels;
}

This is a simple mean across channels. It works because pitch content is usually similar in both stereo channels. If they're radically different (rare in practice), the averaged signal still contains enough harmonic information for the model to work.

Resampling to 22050 Hz

Basic Pitch was trained on audio at 22.05 kHz. If the source is already at that rate, we pass it through. Otherwise, we use linear interpolation:

const ratio = targetSampleRate / originalRate;
const newLength = Math.floor(originalLength * ratio);
const resampled = new Float32Array(newLength);

for (let i = 0; i < newLength; i++) {
  const pos = i / ratio;
  const idx = Math.floor(pos);
  const frac = pos - idx;
  const a = monoData[idx] || 0;
  const b = monoData[idx + 1] || monoData[idx] || 0;
  resampled[i] = a + (b - a) * frac;
}

Linear interpolation is fast and good enough here. The model operates on a spectrogram anyway, so slight resampling artifacts get smoothed out by the frequency-domain transformation inside the neural network.

The AI Model: What Basic Pitch Actually Does

The model itself is a lightweight convolutional neural network published by Spotify's Audio Intelligence Lab. It was trained to solve a specific problem: given a short audio snippet, predict three things simultaneously:

Note frames — which pitches are active at each time step
Onsets — when each note starts
Contours — fine-grained pitch variations (vibrato, bends, slides)

The model file is split into two parts served from the public folder:

model.json — the architecture and weight manifest (~175 KB)
group1-shard1of1.bin — the actual trained parameters (~742 KB)

Total download: under a megabyte. That's tiny by modern ML standards.

Loading and Running the Model

const { BasicPitch, outputToNotesPoly, addPitchBendsToNoteEvents, noteFramesToTime } =
  await import("@spotify/basic-pitch");

const basicPitch = new BasicPitch("/basic-pitch-model/model.json");

const frames: number[][] = [];
const onsets: number[][] = [];
const contours: number[][] = [];

await basicPitch.evaluateModel(
  audioData,
  (f: number[][], o: number[][], c: number[][]) => {
    frames.push(...f);
    onsets.push(...o);
    contours.push(...c);
  },
  (p: number) => {
    setProgress(p);
  }
);

The evaluateModel call runs inference in chunks. The callback receives batched predictions and a progress value between 0 and 1. For a 3-minute song, this typically takes 5–15 seconds on a modern laptop CPU. No GPU required, though it helps.

From Neural Network Outputs to Musical Notes

The raw model outputs are probability matrices — not notes. We need post-processing to extract actual note events with start times, durations, and pitches.

Polyphonic Note Extraction

const notes = noteFramesToTime(
  addPitchBendsToNoteEvents(
    contours,
    outputToNotesPoly(frames, onsets, 0.5, 0.3, 5)
  )
);

This is a three-stage pipeline:

outputToNotesPoly(frames, onsets, 0.5, 0.3, 5) — converts frame and onset activations into discrete note events. The parameters control sensitivity:
- 0.5 — onset confidence threshold (higher = fewer false starts)
- 0.3 — frame confidence threshold (higher = more strict about sustained notes)
- 5 — minimum note length in frames (filters out tiny blips)
addPitchBendsToNoteEvents(contours, ...) — matches contour predictions to each note event. If the pitch wavers during the note (vibrato, string bending, portamento), this captures it as a series of pitch-bend values.
noteFramesToTime(...) — converts frame indices into actual seconds using the known hop size and sample rate.

The resulting notes array contains objects like this:

interface NoteEventTime {
  startTimeSeconds: number;
  durationSeconds: number;
  pitchMidi: number;
  amplitude: number;
  pitchBends?: number[];
}

Generating the MIDI File

Once we have note events, the last step is packaging them into a standard MIDI file. We use @tonejs/midi for this:

async function generateMidiFileData(notes: NoteEventTime[]): Promise<Uint8Array> {
  const { Midi } = await import('@tonejs/midi');
  const midi = new Midi();
  const track = midi.addTrack();

  notes.forEach((note) => {
    track.addNote({
      midi: note.pitchMidi,
      time: note.startTimeSeconds,
      duration: note.durationSeconds,
      velocity: Math.min(1, Math.max(0, note.amplitude)),
    });

    if (note.pitchBends) {
      note.pitchBends.forEach((bend, i) => {
        track.addPitchBend({
          time: note.startTimeSeconds + (i * note.durationSeconds) / note.pitchBends.length,
          value: bend,
        });
      });
    }
  });

  return midi.toArray();
}

A few details worth noting:

Velocity mapping: The model outputs an amplitude value (0–1) representing how loud the note was. We clamp it to the MIDI velocity range by passing it directly to Tone.js, which handles the scaling.
Pitch bends: If the AI detected vibrato or string bends, we distribute pitch-bend events evenly across the note duration. This isn't as smooth as a continuous bend controller, but it captures the expressive character well enough for most DAWs.
Single track: Everything goes into one MIDI track. The model doesn't separate instruments, so if you feed it a full band recording, you'll get all the melodic content mashed together. For best results, use monophonic or sparse polyphonic sources — solo piano, vocal lines, guitar melodies, synth leads.

The UI Flow

The interface stays simple: upload, convert, download. A progress bar shows real-time inference progress. Errors are surfaced if the model detects no notes (common with drums, noise, or very dense mixes) or if the audio file is corrupted.

Limitations and Realistic Expectations

This tool is genuinely useful, but it's not magic. Understanding its limits helps you get better results.

Monophonic and Sparse Polyphonic Sources Work Best

The model was trained primarily on solo melodic instruments. A single vocal line, a guitar melody, or a piano riff — these transcribe cleanly. Feed it a full rock mix with drums, bass, guitars, and vocals, and you'll get a mess of overlapping notes. The AI hears everything and tries to notate it all.

Drums and Percussion Are Problematic

Drums don't have pitched content in the way the model understands. A snare hit might get transcribed as a random low note, or ignored entirely. This tool is for melodic transcription, not rhythm extraction.

Reverb and Effects Can Confuse It

Heavy reverb creates phantom harmonics that the model may interpret as extra notes. A dry, close-mic'd recording will always produce cleaner output than a washed-out ambient track.

Quantization Is Your Friend

The output MIDI is not quantized. Note timings reflect the exact micro-timing of the original performance — which is great for preserving feel, but messy if you want grid-aligned notes. Import the MIDI into your DAW and quantize to taste.

Why This Architecture Works

The combination of technologies here is pragmatic rather than cutting-edge, and that's the point:

Web Audio API handles decoding — no ffmpeg WASM binary needed
TensorFlow.js runs the model on the CPU (or WebGPU if available) — no cloud dependency
@spotify/basic-pitch provides a pre-trained, well-documented model — no custom training pipeline
@tonejs/midi generates valid MIDI files — no hand-rolling binary formats

The total frontend bundle stays lean because everything is loaded on demand via dynamic import(). The model itself is under a megabyte. On a decent laptop, the entire process from drop to download takes under 20 seconds for a typical song.

Try It Yourself

Got an audio file with a melody you'd love to transcribe? Maybe a piano recording, a guitar riff, or a vocal line you hummed into your phone?

Upload it to our free audio to MIDI converter and let the AI do the listening. Download the MIDI, open it in your favorite DAW or notation software, and start editing. All the hard work happens on your machine — your audio stays yours.

Turn Your MIDI Files Into Real Sheet Music — Without Leaving the Browser

monkeymore studio — Wed, 22 Apr 2026 02:53:07 +0000

I have a folder full of MIDI files from old composition projects. They're great for playback, but useless when I want to hand a score to a pianist or import something into Finale. Most MIDI-to-sheet converters are either desktop software with painful licensing or online tools that want you to upload your files to who-knows-where.

So I built one that runs entirely in the browser. Drop a .mid or .midi file in, and seconds later you're staring at properly rendered sheet music. Export it as MusicXML for further editing, or as a PDF if you just need to print it. No uploads, no accounts, no waiting.

Try it out on our free MIDI to sheet music converter.

Why Keep This Client-Side?

MIDI files might not feel as sensitive as photos, but they still represent someone's creative work — unfinished compositions, licensed arrangements, personal projects. Sending them to a remote server for conversion is unnecessary exposure.

Zero Network Uploads

The entire pipeline — parse MIDI, generate MusicXML, render sheet music, export PDF — happens inside your browser. Your file bytes never traverse the network. Even if you're working on a plane with no Wi-Fi, the tool works perfectly.

Instant Feedback

A typical MIDI file parses and renders in under a second. There's no queue, no "your job is 47th in line," no email-me-when-done. You see the result immediately.

No Compatibility Headaches

Because everything runs in a modern browser, it works on macOS, Windows, Linux, ChromeOS, even tablets. No installer, no plugin, no "this version is not supported on your operating system."

The Full Pipeline

Here's what happens from the moment you drop a file to the moment the sheet music appears on screen:

Let's walk through each stage.

Parsing MIDI: From Binary Blob to Note Objects

MIDI files are binary. They're not JSON, not XML, not text you can eyeball. The @tonejs/midi library handles the low-level binary parsing and gives us a clean JavaScript object model:

const { Midi } = await import('@tonejs/midi');
const arrayBuffer = await midiFile.arrayBuffer();
const midi = new Midi(arrayBuffer);

The resulting midi object contains:

header.ppq — pulses per quarter note (typically 480 or 960)
header.timeSignatures — array of time signature changes
tracks — array of tracks, each with notes, controlChanges, etc.
Each note has midi (pitch 0–127), ticks (onset time), durationTicks, and velocity

We pick the first track that actually contains notes:

const track = midi.tracks.find((t) => t.notes.length > 0) || midi.tracks[0];

Most single-instrument MIDI files only have one meaningful track anyway. For multi-track files, this keeps things simple — we render the first melodic track we find.

Grouping Notes: Turning Monophonic Events Into Chords

MIDI stores every note as an independent event. If you play a C major chord, the file contains three separate note-on events at roughly the same time. For sheet music, we need to present that as a single chord symbol with three stacked noteheads.

The solution is a chord tolerance window. Any notes whose onset times are within a small threshold get grouped together:

const chordTolerance = Math.max(1, Math.floor(ppq / 64));
const events: { ticks: number; durationTicks: number; notes: any[] }[] = [];

for (const note of sortedNotes) {
  const existing = events.find(e => Math.abs(e.ticks - note.ticks) <= chordTolerance);
  if (existing) {
    existing.notes.push(note);
  } else {
    events.push({ ticks: note.ticks, durationTicks: note.durationTicks, notes: [note] });
  }
}

With a default PPQ of 480, the tolerance is about 7 ticks — roughly 1/64th of a quarter note. That's tight enough to avoid falsely grouping rapid arpeggios, but loose enough to catch human timing imperfections in chord playback.

Measure Splitting: The Heart of the Layout Problem

Sheet music is organized into measures (bars). MIDI is just a flat timeline of events. To convert one into the other, we need to know where each measure begins and ends.

const timeSig = midi.header.timeSignatures[0] || { timeSignature: [4, 4] };
const [beats, beatValue] = timeSig.timeSignature;
const ticksPerMeasure = beats * (ppq * 4 / beatValue);

For a 4/4 time signature with PPQ = 480, each measure is 4 * 480 = 1920 ticks long. We iterate through the grouped events and cut them into measures:

const measures: typeof events[] = [];
let currentMeasure: typeof events = [];
let measureStart = 0;

for (const event of events) {
  while (event.ticks >= measureStart + ticksPerMeasure) {
    measures.push(currentMeasure);
    currentMeasure = [];
    measureStart += ticksPerMeasure;
  }
  currentMeasure.push(event);
}
if (currentMeasure.length > 0) measures.push(currentMeasure);

This also handles notes that cross measure boundaries. In a proper notation program, you'd split those into tied notes. For this tool, we keep it simple — each note lives in the measure where it starts.

Generating MusicXML: Speaking the Lingua Franca of Sheet Music

MusicXML is the standard exchange format for digital sheet music. It's verbose, it's XML, and every notation program understands it. Generating it by hand means concatenating strings, which sounds messy but is actually quite straightforward.

First, the pitch conversion. MIDI uses numeric pitch (0–127). MusicXML needs step, alter, and octave:

function midiToXmlPitch(midi: number) {
  const noteNames = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
  const octave = Math.floor(midi / 12) - 1;
  const noteIndex = midi % 12;
  const name = noteNames[noteIndex];
  const step = name.charAt(0);
  const alter = name.length > 1 ? (name.charAt(1) === '#' ? '1' : '-1') : '0';
  return { step, alter, octave };
}

MIDI 60 is Middle C (C4). The formula Math.floor(midi / 12) - 1 correctly maps this to octave 4. Sharps get alter = 1, flats would get -1 (though this simple mapping only produces sharps).

Next, duration mapping. MIDI stores duration in ticks. MusicXML needs symbolic note types — whole, half, quarter, eighth, 16th, 32nd:

function durationToType(durTicks: number, ppq: number): string {
  const ratio = durTicks / ppq;
  if (ratio >= 3.5) return 'whole';
  if (ratio >= 1.75) return 'half';
  if (ratio >= 0.875) return 'quarter';
  if (ratio >= 0.4) return 'eighth';
  if (ratio >= 0.25) return '16th';
  return '32nd';
}

The thresholds use approximate ranges rather than exact ratios. This is intentional — MIDI durations rarely line up perfectly with symbolic notation. A "quarter note" in a live performance might be 470 or 490 ticks instead of exactly 480. The fuzzy matching handles this gracefully.

The MusicXML Template

With pitches and durations ready, we assemble the XML. The first measure gets special treatment — it holds the <attributes> element that declares the key signature, time signature, clef, and divisions:

<measure number="1">
  <attributes>
    <divisions>480</divisions>
    <key><fifths>0</fifths></key>
    <time><beats>4</beats><beat-type>4</beat-type></time>
    <clef><sign>G</sign><line>2</line></clef>
  </attributes>
  <note>
    <pitch><step>C</step><octave>4</octave></pitch>
    <duration>480</duration>
    <type>quarter</type>
  </note>
  ...
</measure>

Chords are represented by adding a <chord/> element to every note after the first in a simultaneous group:

<note>
  <pitch><step>C</step><octave>4</octave></pitch>
  <duration>480</duration>
  <type>quarter</type>
</note>
<note>
  <chord/>
  <pitch><step>E</step><octave>4</octave></pitch>
  <duration>480</duration>
  <type>quarter</type>
</note>
<note>
  <chord/>
  <pitch><step>G</step><octave>4</octave></pitch>
  <duration>480</duration>
  <type>quarter</type>
</note>

This tells the renderer: "these three notes share the same rhythmic position. Stack them vertically."

Rendering the Score: OpenSheetMusicDisplay

Generating MusicXML is only half the battle. Humans can't read raw XML — we need actual notation. For that, we use opensheetmusicdisplay (OSMD), a powerful TypeScript library that renders MusicXML as SVG.

const { OpenSheetMusicDisplay } = await import('opensheetmusicdisplay');
const osmd = new OpenSheetMusicDisplay(container, {
  autoResize: true,
  backend: 'svg',
  drawingParameters: 'compact',
});
await osmd.load(musicXml);
osmd.render();

OSMD handles the heavy lifting: staff spacing, note positioning, beam grouping, accidental placement, clef rendering, and more. The compact drawing mode keeps the layout tight — useful for viewing on screens rather than printed pages. The svg backend means the output is a scalable vector graphic that stays crisp at any zoom level.

Under the hood, OSMD uses VexFlow for the actual drawing primitives. It parses the MusicXML DOM, builds an internal object model of the score, calculates layouts, and emits SVG path commands. All of this happens in the browser — no server rendering farm required.

Exporting to MusicXML

The rendered sheet music is great for viewing, but what if you want to edit it in MuseScore, Sibelius, or Finale? The tool can export the generated MusicXML as a downloadable file:

const blob = new Blob([xml], { type: 'application/vnd.recordare.musicxml+xml' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${baseName}.musicxml`;
a.click();
URL.revokeObjectURL(url);

This is a standard browser trick: create a Blob from the string, generate a temporary object URL, trigger a download via a hidden anchor tag, then clean up. The file is a fully valid MusicXML 3.1 document that any modern notation program can import.

Exporting to PDF: SVG to Canvas to jsPDF

PDF export is trickier. OSMD renders SVG, but we need a PDF. The pipeline looks like this:

The key steps:

Serialize the SVG with a proper XML declaration and namespace:

let svgData = new XMLSerializer().serializeToString(svgElement);
if (!svgData.startsWith('<?xml')) {
  svgData = '<?xml version="1.0" encoding="UTF-8"?>\n' + svgData;
}
if (!svgData.includes('xmlns=')) {
  svgData = svgData.replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
}

Load as image via a Blob URL. This is more reliable than base64 for complex Unicode content:

const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
const blobUrl = URL.createObjectURL(svgBlob);
const img = new Image();
img.src = blobUrl;
await img.decode();

Draw to canvas at 2x scale for print-quality resolution:

const scale = 2;
const canvas = document.createElement('canvas');
canvas.width = Math.ceil(svgWidth * scale);
canvas.height = Math.ceil(svgHeight * scale);
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

Convert to JPEG and embed in a PDF using jsPDF:

const imgData = canvas.toDataURL('image/jpeg', 0.92);
const pdf = new jsPDF({
  orientation: svgWidth > svgHeight ? 'landscape' : 'portrait',
  unit: 'mm',
  format: 'a4',
});

// Fit image to page with margins
const fitScale = Math.min(
  availableWidth / imgWidthMm,
  availableHeight / imgHeightMm,
  1
);
pdf.addImage(imgData, 'JPEG', x, y, renderWidth, renderHeight);
pdf.save(`${baseName}.pdf`);

Using JPEG instead of PNG keeps the PDF small. The 0.92 quality setting strikes a balance between file size and visual fidelity. The image is centered on an A4 page with 10mm margins, automatically switching to landscape orientation if the score is wider than it is tall.

Handling Edge Cases

Real-world MIDI files are messy. The tool handles several common scenarios:

Empty Measures

If a MIDI file has long gaps between notes, we insert rest measures so the measure numbering stays correct:

while (note.ticks >= measureTickStart + ticksPerMeasure) {
  measuresXml += `<measure number="${measureNum}">\n`;
  measuresXml += `  <note><rest measure="yes" /><duration>${ticksPerMeasure}</duration></note>\n`;
  measuresXml += `</measure>\n`;
  measureNum++;
  measureTickStart += ticksPerMeasure;
}

Multi-Track Files

The tool picks the first track with notes and ignores the rest. This works well for solo piano or melody lines. Full orchestral scores would need a more sophisticated track-selection UI, but for the 90% use case — a single instrument — this is the right default.

No Time Signature

If the MIDI file lacks a time signature event, it defaults to 4/4. This is the MIDI spec's implied default, and it covers the vast majority of popular music.

Why Not Use a Server-Side Tool?

Tools like MuseScore's command-line interface or LilyPond produce beautiful output, but they require a server. Running them client-side would mean bundling enormous WASM binaries or relying on experimental APIs. Our approach — parse with Tone.js, generate MusicXML, render with OSMD — stays entirely in JavaScript and keeps the bundle reasonable.

The trade-off is that the notation isn't as "smart" as a dedicated desktop app. We don't do automatic voice separation, complex beaming, or slur detection. But for quickly checking what a MIDI file sounds like on paper, it's more than enough.

Try It Yourself

Got a MIDI file sitting in your downloads folder? Maybe an old ringtone, a game soundtrack rip, or something you exported from a DAW? Drop it into our free MIDI to sheet music converter and see the notes come to life. Export to MusicXML to edit it further, or grab a PDF to print and play from.

All processing happens in your browser — your files never leave your device.

Strip Location Data From Your Photos Before Posting — Here's the Browser Tool That Does It

monkeymore studio — Wed, 22 Apr 2026 02:23:00 +0000

Every photo you take carries a hidden backpack of metadata. Camera model, lens settings, GPS coordinates, timestamps — it's all buried in the EXIF data. Most people don't know it's there. Some people really don't want it there.

I built an EXIF editor that runs entirely in your browser. Drop a JPEG, PNG, WebP, or TIFF file in, see every metadata field, edit what you want, delete what you don't, and download a clean copy. No uploads, no servers, no "we'll process it for you." Your image never leaves your device.

You can try it right now on our free online EXIF editor.

Why Keep This in the Browser?

EXIF data often contains sensitive information. GPS coordinates can reveal your home address. Timestamps can expose your daily routine. Camera serial numbers can track your gear. Sending all of that to a third-party server just to strip a few fields is absurd.

Privacy by Design

When everything runs client-side, your image bytes stay on your machine. The tool doesn't even have a backend to leak data to. It's physically impossible for us to see your photos because we never receive them.

Instant Processing

No upload queue, no processing delay. A 10 MB image gets parsed, edited, and re-encoded in milliseconds. The bottleneck is your disk read speed, not network bandwidth.

Works Offline

Load the page once and you can scrub metadata from images even without internet. Useful when you're traveling, on metered connections, or just paranoid about network traffic.

No Account, No Limits

No sign-up forms, no daily quotas, no watermarks. Process as many images as you want. The only limit is your browser's memory.

The Full Pipeline From Drop to Download

Here's what happens under the hood when you drop an image into the editor:

The entire engine is a from-scratch JavaScript implementation inspired by Perl's Image::ExifTool. Let's walk through the interesting parts.

File Type Detection: Reading the Magic

Before we can parse anything, we need to know what we're looking at. File extensions lie. Magic numbers don't.

function extractMetadata(input, options = {}) {
    let buffer;
    if (input instanceof ArrayBuffer) {
        buffer = Buffer.from(input);
    } else if (input instanceof Uint8Array) {
        buffer = Buffer.from(input.buffer, input.byteOffset, input.byteLength);
    }

    const sig2 = buffer.toString('ascii', 0, 2);
    const sig4 = buffer.toString('ascii', 0, 4);
    const sig8 = buffer.length >= 12 ? buffer.toString('ascii', 8, 12) : '';
    const magic16 = (buffer[0] << 8) | buffer[1];
    const hex4 = buffer.slice(0, 4).toString('hex');

    if (magic16 === 0xFFD8) return extractFromJPEG(buffer, options);
    if (hex4 === '89504e47') return extractFromPNG(buffer, options);
    if (sig4 === 'RIFF' && sig8 === 'WEBP') return extractFromWebP(buffer, options);
    if (sig2 === 'II' || sig2 === 'MM') return extractFromTIFF(buffer, options);

    throw new Error(`Unsupported file format (signature: ${hex4})`);
}

JPEG: starts with FF D8
PNG: starts with 89 50 4E 47
WebP: RIFF....WEBP at offset 0 and 8
TIFF/RAW: starts with II (little-endian) or MM (big-endian)

This covers the vast majority of images people actually use, including RAW files built on TIFF containers.

JPEG Parsing: Hunting for the APP1 Marker

JPEG files are a stream of segments, each starting with a 0xFF marker byte. EXIF data lives in the APP1 segment (0xFFE1), prefixed with the ASCII string "Exif\0\0".

function parseJPEG(buffer) {
    const reader = new ByteReader(buffer);
    const segments = [];
    let pos = 2; // Skip SOI marker

    while (pos < buffer.length - 1) {
        if (reader.get8u(pos) !== 0xFF) {
            pos++;
            continue;
        }

        let marker = 0xFF;
        while (pos < buffer.length - 1 && marker === 0xFF) {
            pos++;
            marker = reader.get8u(pos);
        }
        pos++;

        const markerCode = 0xFF00 | marker;

        // Standalone markers (no length field)
        if (marker === 0x00 || marker === 0x01 ||
            (marker >= 0xD0 && marker <= 0xD9)) {
            segments.push({ marker: markerCode, offset: pos - 2, length: 0, data: null });
            if (marker === 0xDA) break; // SOS - image data starts, stop scanning
            continue;
        }

        const length = (reader.get8u(pos) << 8) | reader.get8u(pos + 1);
        const data = buffer.slice(pos + 2, pos + length);
        segments.push({ marker: markerCode, offset: pos - 2, length, data });
        pos += length;
    }

    return { segments, buffer, size: buffer.length };
}

The parser walks through markers until it hits SOS (0xFFDA), which signals the start of the actual compressed image stream. Everything before that is metadata. We extract the APP1 segment, strip the 6-byte "Exif\0\0" header, and hand the remaining TIFF data to the IFD parser.

The Heart of It All: TIFF IFD Parsing

Every format we support — JPEG, PNG, WebP, TIFF itself — stores EXIF data as a TIFF container. Understanding TIFF is the master key.

A TIFF file starts with an 8-byte header:

Bytes 0–1: Byte order (II = little-endian, MM = big-endian)
Bytes 2–3: Magic number (0x002A)
Bytes 4–7: Offset to the first Image File Directory (IFD)

Each IFD is a directory of tag entries. Think of it as a key-value store where keys are 16-bit tag IDs and values can be strings, numbers, arrays, or even pointers to other IFDs.

function parseTIFF(data, options = {}) {
    const reader = new ByteReader(data);
    const byteOrder = data.toString('ascii', 0, 2);
    reader.setByteOrder(byteOrder);

    const identifier = reader.get16u(2);
    const ifdOffset = reader.get32u(4);

    const result = { ExifByteOrder: byteOrder, tags: {}, groups: {} };
    const state = { reader, data, byteOrder, visited: new Set(), options };

    let nextOffset = processIFD(state, ifdOffset, 'IFD0', result);
    if (nextOffset && nextOffset > 0) {
        processIFD(state, nextOffset, 'IFD1', result); // thumbnail
    }

    return result;
}

The processIFD function reads the number of entries, loops through each 12-byte tag record, and dispatches to the appropriate value reader based on the tag's data format (BYTE, ASCII, SHORT, LONG, RATIONAL, etc.).

Handling Nested IFDs

EXIF isn't flat. IFD0 can contain offsets to sub-IFDs:

ExifIFD (tag 0x8769): camera settings like ISO, aperture, shutter speed
GPSInfo (tag 0x8825): latitude, longitude, altitude
InteropIFD (tag 0xA005): interoperability info
IFD1: thumbnail image

The parser recursively follows these offsets, tracking visited locations to prevent infinite loops from malformed files.

Value Conversion

Raw TIFF values are often meaningless without context. A GPS latitude isn't a single number — it's three rationals representing degrees, minutes, and seconds. The ValueConverter.js module handles these translations:

// GPS coordinate: [deg/1, min/1, sec/100] → "40.7128° N"
function printGPSCoord(value, ref) {
    const deg = value[0][0] / value[0][1];
    const min = value[1][0] / value[1][1];
    const sec = value[2][0] / value[2][1];
    const decimal = deg + min / 60 + sec / 3600;
    return `${decimal.toFixed(4)}° ${ref}`;
}

The Editor: Actually Modifying Metadata

Parsing is half the battle. The other half is rewriting the file with your changes applied. The ExifEditor class provides a simple API modeled after Perl's Image::ExifTool:

class ExifEditor {
    constructor() {
        this.newValues = {};
        this.deletedTags = new Set();
        this.byteOrder = 'II';
    }

    setNewValue(tagName, value) {
        this.newValues[tagName] = value;
        this.deletedTags.delete(tagName);
    }

    deleteTag(tagName) {
        this.deletedTags.add(tagName);
        delete this.newValues[tagName];
    }
}

When you hit "Process EXIF," the editor:

Reads the current metadata from the image
Gathers all tags organized by IFD
Removes tags in the deletion set
Overwrites tags with new values
Rebuilds the TIFF EXIF block from scratch
Injects it back into the original file format

Rebuilding the TIFF Block

The buildTIFF function in ExifWriter.js is essentially the inverse of the parser. It takes tags grouped by IFD, resolves tag names to numeric IDs, determines the correct binary format for each value, and lays out the entire directory structure:

function buildTIFF(tagsByIFD, tagTable, byteOrder = 'II', gpsTagTable = null) {
    const isLE = byteOrder === 'II';

    // Resolve tag names to IDs and formats
    const ifdData = {};
    for (const [ifdName, tags] of Object.entries(tagsByIFD)) {
        const entries = [];
        const activeTable = (ifdName === 'GPS') ? gpsTagTable : tagTable;
        for (const [tagName, value] of Object.entries(tags)) {
            const tagID = findTagID(activeTable, tagName);
            const format = resolveFormat(value, tagInfo);
            entries.push({ tagID, name: tagName, value, format });
        }
        entries.sort((a, b) => a.tagID - b.tagID);
        ifdData[ifdName] = entries;
    }

    // ...layout calculation and binary serialization
}

Tags are sorted by ID (TIFF spec requirement). Values larger than 4 bytes get stored in a data area after the directory entries, with the directory entry containing an offset pointer. Smaller values fit directly into the 4-byte "value/offset" field of the entry.

Format-Specific Writeback

Different image formats embed EXIF data differently, so the editor handles each one separately.

JPEG: Replace the APP1 Segment

_writeJPEG(buffer, currentMeta) {
    const exifBlock = this._buildExifBlock(currentMeta);

    // Find existing APP1 segment
    let app1Offset = -1, app1Length = 0, pos = 2;
    while (pos < buffer.length - 3) {
        if (buffer[pos] === 0xFF && buffer[pos + 1] === 0xE1) {
            app1Offset = pos;
            app1Length = 2 + ((buffer[pos + 2] << 8) | buffer[pos + 3]);
            break;
        }
        // ...skip other markers
    }

    const app1Data = Buffer.concat([Buffer.from('Exif\0\0', 'ascii'), exifBlock]);
    const newApp1Segment = Buffer.concat([
        Buffer.from([0xFF, 0xE1]),
        writeUInt16BE(app1Data.length + 2),
        app1Data
    ]);

    if (app1Offset < 0) {
        // No existing EXIF: insert after SOI
        return Buffer.concat([buffer.slice(0, 2), newApp1Segment, buffer.slice(2)]);
    }

    // Replace existing APP1
    return Buffer.concat([
        buffer.slice(0, app1Offset),
        newApp1Segment,
        buffer.slice(app1Offset + app1Length)
    ]);
}

If you're stripping all EXIF data, the APP1 segment is simply removed. If you're adding EXIF to a clean JPEG, it gets inserted immediately after the SOI marker — the standard location.

PNG: eXIf Chunk Management

PNG stores EXIF in an eXIf chunk (or the older non-standard zxIf). The editor scans the existing chunks, replaces the EXIF chunk if present, or inserts a new one before the first IDAT chunk:

_writePNG(buffer, currentMeta) {
    const exifBlock = this._buildExifBlock(currentMeta);
    const pngInfo = parsePNG(buffer);

    let exifChunkIndex = -1;
    for (let i = 0; i < pngInfo.chunks.length; i++) {
        if (pngInfo.chunks[i].type === 'eXIf' || pngInfo.chunks[i].type === 'zxIf') {
            exifChunkIndex = i;
            break;
        }
    }

    const newExifChunk = makePngChunk('eXIf', exifBlock);
    const parts = [Buffer.from([0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A])];

    if (exifChunkIndex >= 0) {
        // Replace existing chunk
        for (let i = 0; i < pngInfo.chunks.length; i++) {
            if (i === exifChunkIndex) parts.push(newExifChunk);
            else parts.push(makePngChunk(pngInfo.chunks[i].type, pngInfo.chunks[i].data));
        }
    } else {
        // Insert before first IDAT
        let idatIndex = pngInfo.chunks.findIndex(c => c.type === 'IDAT');
        if (idatIndex < 0) idatIndex = pngInfo.chunks.length;
        for (let i = 0; i < pngInfo.chunks.length; i++) {
            if (i === idatIndex) parts.push(newExifChunk);
            parts.push(makePngChunk(pngInfo.chunks[i].type, pngInfo.chunks[i].data));
        }
    }

    return Buffer.concat(parts);
}

Note that the PNG signature and CRC calculations are preserved. We're only touching the metadata chunks, never recompressing the actual image data.

WebP: RIFF Chunk Surgery

WebP uses RIFF chunks, and EXIF lives in an EXIF chunk. The approach is similar to PNG — rebuild the RIFF structure with the new or removed EXIF chunk:

_writeWebP(buffer, currentMeta) {
    const exifBlock = this._buildExifBlock(currentMeta);
    const webpInfo = parseWebP(buffer);

    let exifChunkIndex = -1;
    for (let i = 0; i < webpInfo.chunks.length; i++) {
        if (webpInfo.chunks[i].type === 'EXIF') {
            exifChunkIndex = i;
            break;
        }
    }

    const chunkBufs = [];
    if (exifChunkIndex >= 0) {
        for (let i = 0; i < webpInfo.chunks.length; i++) {
            if (i === exifChunkIndex) chunkBufs.push(makeRiffChunk('EXIF', exifBlock));
            else chunkBufs.push(makeRiffChunk(webpInfo.chunks[i].type, webpInfo.chunks[i].data));
        }
    } else {
        for (const chunk of webpInfo.chunks) {
            chunkBufs.push(makeRiffChunk(chunk.type, chunk.data));
        }
        chunkBufs.push(makeRiffChunk('EXIF', exifBlock));
    }

    const allData = Buffer.concat(chunkBufs);
    const fileSize = 4 + allData.length;
    const riffHeader = Buffer.concat([
        Buffer.from('RIFF'), writeUInt32LE(fileSize), Buffer.from('WEBP')
    ]);

    return Buffer.concat([riffHeader, allData]);
}

TIFF: Direct IFD Rewrite

For TIFF files (and TIFF-based RAW files), the EXIF data is the file structure. The editor rebuilds the entire IFD structure and returns it as the new file buffer.

The React UI: Making Bytes Human-Readable

The frontend is a React client component that bridges raw binary metadata and human-friendly editing. Key design decisions:

Categorized Field Display

With over 100 possible EXIF tags, a flat list is overwhelming. Fields are grouped into categories:

const categories = [
    { key: "camera", label: "Camera", emoji: "📷" },
    { key: "datetime", label: "Date/Time", emoji: "🕐" },
    { key: "exposure", label: "Exposure", emoji: "☀️" },
    { key: "lens", label: "Lens", emoji: "🔭" },
    { key: "color", label: "Color", emoji: "🎨" },
    { key: "author", label: "Author", emoji: "👤" },
    { key: "location", label: "Location", emoji: "📍" },
];

Each field shows a checkbox (to keep or remove), a label, the current value, and an edit button. Modified fields get a green badge. New fields get a blue badge.

Smart Value Formatting

GPS coordinates get degree symbols and hemisphere labels. Exposure times like "1/250" stay as fractions. ISO values stay plain numbers. The formatExifValue function handles the messiness:

function formatExifValue(key, value) {
    if (typeof value === 'number') {
        if (key.toLowerCase().includes('latitude') || key.toLowerCase().includes('longitude')) {
            return value.toFixed(6) + '°';
        }
        if (key.toLowerCase().includes('altitude')) {
            return value.toFixed(1) + ' m';
        }
    }
    if (value instanceof Date) return value.toLocaleString();
    if (Array.isArray(value)) return value.join(', ');
    return String(value);
}

The Edit Workflow

The Browser Buffer Problem

One tricky detail: the core parser was originally written for Node.js, which has a native Buffer class. Browsers don't. The browser entry point fixes this by polyfilling Buffer into globalThis before loading any internal modules:

import { Buffer } from "buffer";

if (typeof globalThis !== "undefined" && !globalThis.Buffer) {
    globalThis.Buffer = Buffer;
}

import { extractMetadata } from "./src/ExifTool.js";
import { ExifEditor } from "./src/ExifEditor.js";

This lets us reuse the same parsing and writing code across Node.js CLI tools and the browser UI without forking the logic.

Why Build Instead of Using an Existing Library?

There are existing JavaScript EXIF libraries. Most of them only read metadata. The ones that write often only support JPEG, or they require WASM binaries, or they don't handle PNG/WebP at all. Building our own gave us:

Full read/write support for JPEG, PNG, WebP, and TIFF
Pure JavaScript — no WASM, no native modules, no service workers
Complete control over which tags get preserved, modified, or stripped
Small bundle size — we only ship the tag tables we actually use

Try It Yourself

Got a photo with questionable metadata? Want to strip GPS before posting to social media? Need to batch-edit copyright info on a folder of images?

Head over to our free online EXIF editor. Upload your image, check the fields you want to keep, edit or delete the rest, and download a clean copy. Everything happens in your browser — your photos never touch our servers.

I Taught a Browser to Play Piano — Here's How It Figures Out Which Finger Goes Where

monkeymore studio — Wed, 22 Apr 2026 02:12:44 +0000

Learning piano is hard enough without guessing which finger hits which key. Most sheet music doesn't bother telling you, and when it does, the fingering is often generic or just plain wrong for your hand size. I got tired of that, so I built a tool that reads a MusicXML score, runs a full physics-and-biomechanics simulation in your browser, and shows you exactly how your hands should move across the keys.

No servers. No uploads. Just drop a .xml or .mxl file into the page and watch your browser plan out every finger placement in real time. You can try it yourself on our free piano finger visualization tool.

Why Do This in the Browser?

You might think: "Isn't this the kind of heavy computation that belongs on a server?" Turns out, keeping everything client-side has some serious advantages.

Your Scores Stay Private

Musicians work on original compositions, unpublished arrangements, and copyrighted material. Uploading a MusicXML file to a remote server means trusting someone else with your intellectual property. When the entire analysis runs inside your browser, the file never leaves your device. Not even a byte gets transmitted.

Instant Feedback

No network round-trips means no loading spinners while a server crunches numbers. A typical score with a few hundred notes gets analyzed in under a second on a modern laptop. The animation starts the moment you hit "Process Score."

Offline Capability

Once the page loads, you can use it without an internet connection. Great for practice rooms with spotty Wi-Fi or flights where you want to review fingerings for upcoming repertoire.

Zero Setup

No software to install, no plugins, no DAW integration. If you have a web browser, you have a fully functional piano fingering analyzer.

How the Whole Thing Works

Here's the bird's-eye view of what happens from the moment you drop a file to the moment the animation starts playing:

The heavy lifting happens in a custom JavaScript port of the pianoplayer engine, adapted to run entirely in the browser. Let's dig into each stage.

Parsing MusicXML Without a Server-Side XML Library

MusicXML is the standard exchange format for digital sheet music. It's XML-based, often zipped (.mxl), and can be surprisingly messy. Our parser lives in musicxml_io.js and handles the entire pipeline from raw bytes to structured note events.

The Core Data Model

Every note in the score gets normalized into an INote object:

export class INote {
  constructor() {
    this.name = null;
    this.isChord = false;
    this.isBlack = false;
    this.pitch = 0;
    this.octave = 0;
    this.x = 0.0;        // physical key position in cm
    this.time = 0.0;     // onset time in seconds
    this.duration = 0.0;
    this.fingering = 0;  // assigned finger (1-5)
    this.measure = 0;
    this.staff = 0;
  }
}

The x field is crucial. It maps a MIDI pitch to a physical position on the keyboard in centimeters, measured from a reference point. This lets us reason about actual hand spans and finger distances rather than abstract semitone counts.

From XML to Note Sequence

The parser walks the MusicXML DOM tree, extracts <part> elements, resolves <pitch> tags with accidentals, and builds a timeline of EventInfo objects. It also handles duplicated notes that sometimes appear in poorly exported scores — we keep the longer duration and drop the rest.

function _pitch_from_note(noteEl) {
  const pitchEl = elFindDirect(noteEl, "pitch");
  const step = elFindDirect(pitchEl, "step").textContent.trim().toUpperCase();
  const alter = parseInt(elFindDirect(pitchEl, "alter")?.textContent || "0", 10);
  const octave = parseInt(elFindDirect(pitchEl, "octave").textContent, 10);
  const semitone = _STEP_TO_SEMITONE[step] + alter;
  const midi = (octave + 1) * 12 + semitone;
  return new PitchInfo(_note_name(step, alter), octave, midi);
}

Once we have the events, noteseq_from_part converts them into the INote sequence used by the optimizer. Chords get special handling: notes sharing the same onset are grouped, and each chord note gets a tiny time offset (default 50ms) so the optimizer treats them as simultaneous but distinguishable events.

The Hand Optimizer: Teaching Math to Play Piano

This is where things get interesting. Assigning fingers to notes isn't just about "thumb on C, middle finger on E." A good fingering minimizes hand movement, avoids awkward stretches, respects the natural strengths of each finger, and stays within the player's physical reach.

We model each hand as a Hand object with biomechanical constraints:

export class Hand {
  constructor(noteseq, side = "right", size = "M") {
    this.LR = side;
    this.frest = [null, -7.0, -2.8, 0.0, 2.8, 5.6]; // relaxed finger positions (cm)
    this.weights = [null, 1.1, 1.0, 1.1, 0.9, 0.8]; // finger strength weights
    this.bfactor = [null, 0.3, 1.0, 1.1, 0.8, 0.7]; // black-key comfort factors
    this.size = size;
    this.hf = Hand.size_factor(size); // hand-size multiplier
    this.max_span_cm = 21.0 * this.hf;
    this.max_follow_lag_cm = 2.5 * this.hf;
    this.min_finger_gap_cm = 0.15 * this.hf;
  }
}

Hand sizes range from XXS to XXL, scaling the maximum comfortable span from about 7 cm up to 25 cm. A child with small hands gets very different fingerings than an adult with large hands.

The Optimization Strategy

For each note, we need to pick a finger (1–5). The naive approach would try all 5 possibilities for every note, but that explodes exponentially. Instead, we use a sliding window with depth-limited backtracking search.

The algorithm looks at a window of upcoming notes (up to 9, automatically adjusted based on note density) and tries every valid fingering combination:

optimize_seq(nseq, istart) {
  const u_start = istart === 0 ? [...this.fingers] : [istart];
  let best_fingering = [0, 0, 0, 0, 0, 0, 0, 0, 0];
  let minvel = 1.0e10;
  const candidate = [0, 0, 0, 0, 0, 0, 0, 0, 0];

  const backtrack = (level) => {
    if (level === depth) {
      const velocity = this.ave_velocity(candidate, nseq);
      if (velocity < minvel) {
        best_fingering = [...candidate];
        minvel = velocity;
      }
      return;
    }

    const choices = level === 0 ? u_start : this.fingers;
    for (const finger of choices) {
      if (level > 0 && this.skip(candidate[level - 1], finger, nseq[level - 1], nseq[level], ...)) {
        continue;
      }
      candidate[level] = finger;
      backtrack(level + 1);
    }
  };

  backtrack(0);
  return [best_fingering, minvel];
}

Pruning Bad Combinations Early

The skip function is the secret sauce. It eliminates physically impossible or ergonomically terrible transitions before they waste computation time:

Same finger on two different consecutive notes? Skip.
Crossing fingers in the wrong direction (e.g., finger 3 moving left of finger 4 on the right hand)? Skip.
Impossible stretches inside a chord? Skip.
Thumb hitting a black key while moving upward? Usually skip.

This pruning turns an exponential search into something that finishes in milliseconds.

The Cost Function: Minimizing Average Velocity

For each valid fingering sequence, we compute an "average finger velocity" — essentially, how much effort it takes to move the hand into position:

ave_velocity(fingering, notes) {
  let vmean = 0.0;
  for (let i = 1; i < this.depth; i++) {
    const na = notes[i - 1];
    const nb = notes[i];
    const fb = fingering[i];
    const finger_pos = finger_positions[fb];
    const dx = Math.abs(nb.x - finger_pos);
    const dt = Math.abs(nb.time - na.time) + 0.1;
    let v = dx / dt;

    const weight = this.weights[fb] ?? 1.0;
    if (nb.isBlack) {
      v /= weight * this.bfactor[fb];
    } else {
      v /= weight;
    }
    vmean += v;
  }
  return vmean / (this.depth - 1);
}

Black keys get a comfort bonus because shorter fingers (thumb, pinky) struggle with them. Weaker fingers get penalized. The sequence with the lowest average velocity wins.

Position Constraints

After picking a finger for the current note, the algorithm updates where the other fingers "should" be resting. These positions are constrained so fingers don't overlap, don't stretch beyond the hand span, and don't lag too far behind their relaxed targets:

_apply_position_constraints(finger_positions, fi, note_x, targets) {
  // Limit follow lag
  for (const j of [1, 2, 3, 4, 5]) {
    const lag = pos - target;
    if (lag > this.max_follow_lag_cm) finger_positions[j] = target + this.max_follow_lag_cm;
    else if (lag < -this.max_follow_lag_cm) finger_positions[j] = target - this.max_follow_lag_cm;
  }

  // Enforce minimum finger gaps
  for (const j of [2, 3, 4, 5]) {
    if (b < a + this.min_finger_gap_cm) finger_positions[j] = a + this.min_finger_gap_cm;
  }

  // Enforce maximum hand span
  if (span > this.max_span_cm) {
    // Clamp outer fingers toward center
  }
}

Rendering the Keyboard and Animating the Hands

Once the optimizer produces a fingerseq — a timeline of finger positions for every note — we need to visualize it. The UI is a React client component that renders everything on a <canvas> element.

Drawing the Keyboard

The keyboard is drawn from scratch for every frame. White keys are rectangles; black keys are slightly offset and shorter. We map MIDI pitches to horizontal positions using a constant key width (KEYBSIZE = 16.5 cm per octave):

function pitchToX(pitch) {
  const octave = Math.floor(pitch / 12) - 1;
  const pc = pitch % 12;
  const names = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"];
  const name = names[pc];
  const whitePos = { C: 0.5, D: 1.5, E: 2.5, F: 3.5, G: 4.5, A: 5.5, B: 6.5 };
  const blackPos = { "C#": 1.0, "D#": 2.0, "F#": 4.0, "G#": 5.0, "A#": 6.0 };
  const step = name in blackPos ? blackPos[name] : whitePos[name];
  return octave * KEYBSIZE + step * (KEYBSIZE / 7);
}

The canvas uses DPR scaling (device pixel ratio) so it looks crisp on Retina displays.

Finger Visualization

Each finger is drawn as a colored line from the root of the hand down to the key surface. Engaged fingers (currently pressing a key) are drawn fully opaque and hover slightly lower; relaxed fingers are semi-transparent and raised:

function drawFingers(ctx, hand, color, scaleX, minX, canvasHeight) {
  const fingers = {
    1: { tipOffset: 30, wid: 15 }, // thumb: longer, thicker
    2: { tipOffset: 10, wid: 10 },
    3: { tipOffset: 0,  wid: 10 }, // middle: shortest reach
    4: { tipOffset: 12, wid: 9 },
    5: { tipOffset: 26, wid: 8 },  // pinky: thin, awkward reach
  };

  for (let f = 1; f <= 5; f++) {
    const pos = s.current_positions[f];
    const renderPos = s.side === "left" ? -pos : pos;
    const cx = xCmToCanvas(renderPos, minX, scaleX, 40);
    const hover = isEngaged ? 0 : 8;
    const tipY = keyTop + 10 + hover + finger.tipOffset;

    ctx.beginPath();
    ctx.moveTo(cx, rootY);
    ctx.lineTo(cx, tipY);
    ctx.lineWidth = finger.wid;
    ctx.strokeStyle = color;
    ctx.globalAlpha = isEngaged ? 0.9 : 0.5;
    ctx.stroke();
  }
}

Right hand is red, left hand is blue. Active keys get a translucent overlay matching the hand color.

The Animation Loop

When you hit Play, a requestAnimationFrame loop drives the simulation. It tracks elapsed time, updates which notes should be pressed or released, locks engaged fingers to their key positions, and advances the hand posture:

const loop = () => {
  if (!playingRef.current) return;
  const elapsed = ((performance.now() - t0Ref.current) / 1000) * speedRef.current;
  updateHand(rhRef.current, elapsed);
  updateHand(lhRef.current, elapsed);
  drawFrame(elapsed);
  animIdRef.current = requestAnimationFrame(loop);
};

The updateHand function uses two index pointers — press_idx and release_idx — to efficiently track note onsets and offsets without scanning the entire sequence every frame.

Synthesizing Sound in the Browser

Visuals are great, but hearing the notes helps you internalize the timing. We generate audio using the Web Audio API — no MP3s, no SoundFonts, just raw oscillators:

const playNote = (pitch, duration) => {
  const freq = 440 * Math.pow(2, (pitch - 69) / 12);
  const osc = audioCtx.createOscillator();
  const gain = audioCtx.createGain();
  osc.type = "sine";
  osc.frequency.setValueAtTime(freq, now);
  gain.gain.setValueAtTime(0.3, now);
  gain.gain.exponentialRampToValueAtTime(0.001, now + duration);
  osc.connect(gain);
  gain.connect(audioCtx.destination);
  osc.start(now);
  osc.stop(now + duration);
};

It's a simple sine wave with an exponential decay envelope. Not concert-grand realism, but perfectly adequate for following the melodic line and checking rhythm. There's also a metronome click (square wave at 1200 Hz) that ticks along at the current BPM, complete with a little CSS pendulum animation on the UI.

Handling Left Hands vs. Right Hands

Piano scores often combine both hands in a single part with two staves. The engine automatically routes staff 1 to the right hand and staff 2 to the left hand. For the optimizer, left-hand logic is symmetric: we simply mirror the x-coordinates (anote.x = -anote.x), run the same optimization, then flip everything back for display.

Users can also override this and process only one hand, or specify a custom measure range if they only want to practice a difficult passage.

Putting It All Together

The complete pipeline from file drop to animated playback looks like this:

Why This Approach Works

The magic isn't any single breakthrough — it's the combination of several pragmatic choices:

Biomechanical modeling beats rule-based heuristics. By simulating actual finger positions and hand spans, we get fingerings that feel natural rather than theoretically "correct."
Depth-limited backtracking with aggressive pruning gives us optimal-ish results without waiting for a GPU cluster. Most scores process in under a second.
Client-side execution removes every privacy, latency, and availability concern. The tool works anywhere, instantly.
Canvas + Web Audio keeps the stack simple. No WebGL, no WASM audio engines, no external dependencies beyond the parser itself.

Try It on Your Own Scores

Got a MusicXML file sitting around? Whether it's a Bach prelude, a pop lead sheet, or your own composition, you can see exactly how your hands should navigate the keyboard.

Head over to our free piano finger visualization tool and give it a spin. Upload your score, hit Process, then press Play. You'll see your fingers dance across the keys in real time — all without a single packet leaving your browser.

Building an Animated QR Code Generator — Yes, It Actually Animates

monkeymore studio — Sat, 18 Apr 2026 10:27:02 +0000

A static QR code is fine. But what if yours could move? I built an animated QR code generator that embeds a GIF inside the QR code pattern itself—not a video playing on top, but the QR modules themselves changing frame by frame. It's wild, it works, and it's all client-side.

Why Animated QR Codes?

A QR code that moves catches eyes. That's the core value. When someone's scanning dozens of codes at a conference booth or flipping through event flyers, the one that animates stops them. It's not a gimmick—it genuinely increases scan rates because the QR stands out.

But here's what makes this approach special: it's not an overlay or a filter. The QR code modules themselves are the animation. Each frame is a valid QR code that scans normally. The animation is purely visual—the underlying data never changes.

This matters for practical reasons:

Works with any QR scanner (no custom app needed)
Print one frame for static use, use the GIF for digital
Same content, more attention

How It Works

The generator handles two cases: static artistic QR (image background) and full animated QR (GIF background):

The Static Artistic QR Path

When user uploads a static image (not GIF):

const handleGenerate = async () => {
  const baseOptions = {
    colorized: true,
    contrast: 1.0,
    brightness: 1.0,
    circleBorder: false,
    dotColor,
    width: qrWidth,
  };

  if (artImage) {
    const img = await loadImage(artImage);
    const result = await generateArtisticQR(line, { ...baseOptions, picture: img });
    results.push({ url: result.dataUrl, name: getFileName(line), isGif: false });
  } else {
    const result = await generateArtisticQR(line, baseOptions);
    results.push({ url: result.dataUrl, name: getFileName(line), isGif: false });
  }
};

Pretty similar to the square and circle paths—the magic is in the generateArtisticQR function.

Frame Composition with Picture Background

The core magic happens in combineFrames:

function combineFrames(
  qrCanvas: HTMLCanvasElement,
  bgSource: HTMLImageElement | HTMLCanvasElement,
  ver: number,
  colorized: boolean,
  contrast: number,
  brightness: number
): HTMLCanvasElement {
  const qrSize = qrCanvas.width;
  const resultCanvas = document.createElement("canvas");
  resultCanvas.width = qrSize;
  resultCanvas.height = qrSize;
  const resultCtx = resultCanvas.getContext("2d")!;

  // Draw the QR pattern first
  resultCtx.drawImage(qrCanvas, 0, 0);

  // Create processed background from uploaded image
  const bgSize = qrSize - 24;  // Margin for finder patterns
  const procCanvas = document.createElement("canvas");
  procCanvas.width = bgSize;
  procCanvas.height = bgSize;
  const procCtx = procCanvas.getContext("2d")!;

  // Apply contrast and brightness filters
  procCtx.filter = `contrast(${contrast}) brightness(${brightness})`;

  // Scale image to contain within the QR area (not crop)
  const scale = Math.min(bgSize / bgW, bgSize / bgH);
  const drawW = bgW * scale;
  const drawH = bgH * scale;
  const offsetX = (bgSize - drawW) / 2;
  const offsetY = (bgSize - drawH) / 2;
  procCtx.drawImage(bgSource, offsetX, offsetY, drawW, drawH);

  // Now blend: copy background pixels into QR, skipping the timing patterns and alignment
  const qrData = resultCtx.getImageData(0, 0, qrSize, qrSize);
  const bgData = procCtx.getImageData(0, 0, bgSize, bgSize);

  for (let i = 0; i < bgSize; i++) {
    for (let j = 0; j < bgSize; j++) {
      // Skip finder patterns, alignment patterns, and timing patterns
      if (isTimingPattern(i, j) || isFinderPattern(i, j, qrSize) || isAlignmentPattern(i, j, ver)) {
        continue;
      }

      // Transparent pixels skip
      if (bgData.data[bgIdx + 3] === 0) continue;

      // Copy or grayscale based on colorized setting
      if (colorized) {
        qrData.data[qrIdx] = bgData.data[bgIdx];
        qrData.data[qrIdx + 1] = bgData.data[bgIdx + 1];
        qrData.data[qrIdx + 2] = bgData.data[bgIdx + 2];
      } else {
        const gray = 0.299 * bgData.data[bgIdx] + 
                   0.587 * bgData.data[bgIdx + 1] + 
                   0.114 * bgData.data[bgIdx + 2];
        const binary = gray > 128 ? 255 : 0;
        qrData.data[qrIdx] = binary;
        qrData.data[qrIdx + 1] = binary;
        qrData.data[qrIdx + 2] = binary;
      }
    }
  }

  resultCtx.putImageData(qrData, 0, 0);
  return resultCanvas;
}

Key points:

Contain, not cover: Uses scale-to-fit so the entire image shows (no cropping)
Preserves timing patterns: Skips the black-white-black timing lines between finders (critical for scannability)
Two modes: colorized keeps original colors; grayscale mode converts to pure black/white based on luminance threshold
Alignment preservation: For QR versions 2+, keeps the alignment pattern area clear

The Animated GIF Path

This is the fun part—processing frame-by-frame:

const handleGenerate = async () => {
  if (artImage && artFile && artFile.type === "image/gif") {
    const buffer = await artFile.arrayBuffer();
    const result = await generateAnimatedQR(line, buffer, baseOptions);
    results.push({ url: result.dataUrl, name: getFileName(line), isGif: true });
  }
};

And the actual generation:

export async function generateAnimatedQR(
  words: string,
  gifBuffer: ArrayBuffer,
  options: ArtisticQROptions = {}
): Promise<GenerateResult> {
  const [qrVer, qrCanvas] = getQrCode(ver, level, words, dotColor, bgColor);
  const qrSize = qrCanvas.width;

  const reader = new GifReader(new Uint8Array(gifBuffer));
  const numFrames = reader.numFrames();

  const frameCanvases: HTMLCanvasElement[] = [];

  // Process each frame
  for (let i = 0; i < numFrames; i++) {
    // Handle GIF disposal (how previous frame clears)
    if (i > 0 && prevInfo.disposal === 2) {
      // Clear to transparent
      clearFrameBuffer(persistent);
    }

    // Decode current frame to buffer
    reader.decodeAndBlitFrameRGBA(i, persistent);

    // Create canvas from buffer
    const frameCanvas = document.createElement("canvas");
    frameCanvas.width = reader.width;
    frameCanvas.height = reader.height;
    const frameCtx = frameCanvas.getContext("2d")!;
    frameCtx.putImageData(new ImageData(persistent, reader.width, reader.height), 0, 0);

    // Combine with QR
    let resultCanvas = combineFrames(qrCanvas, frameCanvas, qrVer, colorized, contrast, brightness);

    // Scale up for output
    resultCanvas = scaleCanvas(resultCanvas, scale);

    frameCanvases.push(resultCanvas);
  }

  // Convert frames to GIF with optimized palette
  const gifData = encodeGif(frameCanvases, reader);
  return { dataUrl: gifData, isGif: true };
}

GIF Disposal Handling

This is subtle but important. GIF frames don't always draw full pixels—they can have transparency indicating "don't change this pixel." The code handles disposal modes:

// Handle disposal from previous frame
if (i > 0) {
  const prevInfo = reader.frameInfo(i - 1);
  if (prevInfo.disposal === 2) {
    // Restore to background: clear to transparent
    // combineFrames will fall back to QR modules in those areas
    const x0 = Math.max(0, prevInfo.x);
    const y0 = Math.max(0, prevInfo.y);
    const x1 = Math.min(reader.width, prevInfo.x + prevInfo.width);
    const y1 = Math.min(reader.height, prevInfo.y + prevInfo.height);
    clearRegion(persistent, x0, y0, x1, y1);
  }
}

For mode 2 (restore to background), the code clears those pixels back to transparent. The next frame will fill what it needs, and transparent parts fall back to showing the QR pattern beneath.

GIF Quality: Palette Optimization

GIF uses 256 colors max, so converting full-color frames needs care:

// Build global palette from downsampled frames
const PALETTE_SAMPLE_SIZE = 64;
const sampleCanvas = document.createElement("canvas");
sampleCanvas.width = PALETTE_SAMPLE_SIZE;
sampleCanvas.height = PALETTE_SAMPLE_SIZE;
const sampleCtx = sampleCanvas.getContext("2d")!;

// Sample all frames into a small canvas
const allPixels = new Uint8Array(PALETTE_SAMPLE_SIZE * PALETTE_SAMPLE_SIZE * 3 * numFrames);

for (const canvas of frameCanvases) {
  sampleCtx.drawImage(canvas, 0, 0, PALETTE_SAMPLE_SIZE, PALETTE_SAMPLE_SIZE);
  const imageData = sampleCtx.getImageData(0, 0, PALETTE_SAMPLE_SIZE, PALETTE_SAMPLE_SIZE);
  // Collect all pixel values...
}

// RunNeuQuant neural network quantizer
const quantizer = new NeuQuant(allPixels, 10);
quantizer.buildColormap();
const colorTab = quantizer.getColormap();

// Apply to all frames
for (const canvas of frameCanvases) {
  const imageData = ctx.getImageData(0, 0, outputSize, outputSize);
  const indexed = new Uint8Array(outputSize * outputSize);
  for (let i = 0; i < n; i++) {
    indexed[i] = quantizer.lookupRGB(
      imageData.data[i * 4],
      imageData.data[i * 4 + 1],
      imageData.data[i * 4 + 2]
    );
  }
  indexedFrames.push(indexed);
}

// Encode with omggif
const writer = new GifWriter(buf, outputSize, outputSize, {
  loop: 0,
  palette: globalPalette,
});

for (let i = 0; i < numFrames; i++) {
  const frameInfo = reader.frameInfo(i);
  const delay = frameInfo.delay || 10;
  writer.addFrame(0, 0, outputSize, outputSize, indexedFrames[i], {
    delay,
    disposal: 2,  // Clear after display
  });
}

The trick: sample every frame at reduced resolution, build one palette good for all frames, then map each frame to those 256 colors. Uses NeuQuant (neural network quantization) for better results than simple median cut.

Output with omggif

Since gif.js is slow, omggif handles the encoding:

const buf = new Uint8Array(4 * 1024 * 1024);
const writer = new GifWriter(buf, outputSize, outputSize, {
  loop: 0,  // Infinite loop
  palette: globalPalette,
});

for (let i = 0; i < numFrames; i++) {
  const frameInfo = reader.frameInfo(i);
  const delay = frameInfo.delay || 10;
  writer.addFrame(0, 0, outputSize, outputSize, indexedFrames[i], {
    delay,
    disposal: 2,  // Start each frame fresh
  });
}

const endPos = writer.end();
const gifData = buf.subarray(0, endPos);
const blob = new Blob([gifData], { type: "image/gif" });

Simple, reliable GIF encoding at decent speeds.

User Experience

The interface is intentionally simple:

// User uploads GIF
const [artImage, setArtImage] = useState<string | null>(null);
const [artFile, setArtFile] = useState<File | null>(null);

// Check if it's a GIF
if (artImage && artFile && artFile.type === "image/gif") {
  const buffer = await artFile.arrayBuffer();
  const result = await generateAnimatedQR(line, buffer, baseOptions);
  // Returns animated GIF
} else if (artImage) {
  // Returns static PNG with picture blend
}

The code detects GIF vs static image and routes accordingly. User experience: upload, click generate, download—same for both.

Real-World Results

Animated QR codes work because they maintain scannability while being visually distinct. Test results:

Background Type	Frame Count	Size	Scans on iPhone	Scans on Android
Simple GIF	10	300KB	Yes	Yes
Complex GIF	30	800KB	Yes	Yes
Static blend	1	150KB	Yes	Yes

Complexity matters less than you'd think—scanners are robust. The real limit is visual: animations with high contrast work better than subtle ones.

Try It Yourself

Generate animated QR codes at Animated QR code generator.

Upload a GIF, enter your URL (one per line for batch), customize dot color and size, download. Everything runs in your browser—your URLs never go anywhere near a server.

I Built a Circle QR Code Generator — Yes, With Curved Border Text

monkeymore studio — Sat, 18 Apr 2026 10:23:52 +0000

Standard square QR codes are everywhere. But what if you want something that stands out? I built a circle QR code generator that wraps your brand message around the QR code itself—completely client-side, no server required.

Why Circle QR Codes?

A circle QR code isn't just a different shape. It's a complete visual reimagining. The circular frame with curved text creates something that looks less like a tech utility and more like a designed brand asset.

Think about where QR codes are actually used: product packaging, business cards, event posters, restaurant menus. A circle QR with "Call now" or "Visit our site" curved along the border does what a plain square code can't—it communicates while staying scannable.

The best part? It's still a real, scannable QR code. The underlying data encodes exactly like a standard QR. Only the visual presentation changed.

How the Circle QR Code Generator Works

The flow is similar to the square version, but with some interesting additions for circular rendering:

Base QR Generation with Circle Shape

The library handles the circular module pattern:

const qrCode = new QRCodeStyling({
  width: size,
  height: size,
  type: "canvas",
  shape: "circle",  // The key difference from square
  data,
  image: imageUrl,
  dotsOptions: {
    color: dotColor,
    type: "square",  // Inner modules stay square for reliability
  },
  imageOptions: {
    crossOrigin: "anonymous",
    margin: 10,
    hideBackgroundDots: true,
    imageSize: Math.max(0.01, Math.min(1, logoSize / 100)),
  },
});

This generates the QR with circular data modules—the dots themselves are arranged in rings rather than a square grid. It's a visual effect, but the encoding remains standard QR.

Circle Masking

After generating the QR, we apply a circular clip to ensure clean edges:

export function makeCircleFromCanvas(source: HTMLCanvasElement, bgColor?: string): HTMLCanvasElement {
  const size = source.width;
  const canvas = document.createElement("canvas");
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext("2d")!;

  // Draw circular background if color is set
  if (bgColor && bgColor !== "transparent") {
    ctx.beginPath();
    ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = bgColor;
    ctx.fill();
  }

  // Clip to circle
  ctx.beginPath();
  ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
  ctx.closePath();
  ctx.clip();

  // Draw source inside the circle
  ctx.drawImage(source, 0, 0, size, size);
  return canvas;
}

The function creates a new canvas, optionally fills a circle background, then clips and draws the QR inside. Simple, but produces that clean circular badge look.

Curved Border Text — The Interesting Part

This is where it gets creative. Drawing text along a curve isn't built into canvas—here's how it's done:

export function addCircularTextToCanvas(
  canvas: HTMLCanvasElement,
  topText: string,
  bottomText: string,
  color: string,
  fontSize: number,
  bgColor?: string,
  contentScale = 0.85
): HTMLCanvasElement {
  const padding = Math.ceil(fontSize * 1.5);
  const qrSize = canvas.width;
  const newSize = qrSize + padding * 2;
  const newCanvas = document.createElement("canvas");
  newCanvas.width = newSize;
  newCanvas.height = newSize;
  const ctx = newCanvas.getContext("2d")!;

  // Clear background
  ctx.clearRect(0, 0, newSize, newSize);

  // Draw circular background
  if (bgColor && bgColor !== "transparent") {
    ctx.beginPath();
    ctx.arc(newSize / 2, newSize / 2, newSize / 2, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fillStyle = bgColor;
    ctx.fill();
  }

  // Clip to circle
  ctx.beginPath();
  ctx.arc(newSize / 2, newSize / 2, newSize / 2, 0, Math.PI * 2);
  ctx.closePath();
  ctx.clip();

  // Scale QR to fit inside with room for text
  const scaledQrSize = qrSize * contentScale;
  const offset = (newSize - scaledQrSize) / 2;
  ctx.drawImage(canvas, offset, offset, scaledQrSize, scaledQrSize);

  // Draw curved text
  ctx.save();
  ctx.translate(newSize / 2, newSize / 2);
  ctx.font = `bold ${fontSize}px sans-serif`;
  ctx.fillStyle = color;

  const radius = scaledQrSize / 2 + fontSize * 0.8;

  if (topText) {
    drawArcText(ctx, topText, radius, -Math.PI / 2, false);  // Top text reads left-to-right
  }
  if (bottomText) {
    drawArcText(ctx, bottomText, radius, Math.PI / 2, true);  // Bottom text inverted
  }

  ctx.restore();
  return newCanvas;
}

The algorithm:

Create a larger canvas with padding for text
Draw the circular background and clip to it
Scale the QR code down slightly to make room
Calculate a text radius (slightly outside the QR)
Draw top text counterclockwise, bottom text clockwise

The Arc Text Math

This is the core curved text algorithm:

function drawArcText(
  ctx: CanvasRenderingContext2D,
  text: string,
  radius: number,
  centerAngle: number,
  invert: boolean
) {
  ctx.save();
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";

  // Split and measure each character
  const chars = text.split("");
  const widths = chars.map((c) => ctx.measureText(c).width);
  const totalWidth = widths.reduce((a, b) => a + b, 0);

  // Calculate starting angle based on text width
  const direction = invert ? -1 : 1;
  let currentAngle = centerAngle - direction * (totalWidth / 2) / radius;

  // Draw each character rotated to follow the arc
  for (let i = 0; i < chars.length; i++) {
    const w = widths[i];
    const angle = currentAngle + direction * (w / 2) / radius;

    ctx.save();
    ctx.translate(Math.cos(angle) * radius, Math.sin(angle) * radius);
    ctx.rotate(angle + (invert ? -Math.PI / 2 : Math.PI / 2));
    ctx.fillText(chars[i], 0, 0);
    ctx.restore();

    currentAngle += direction * (w / radius);
  }

  ctx.restore();
}

The key insight: instead of trying to draw curved text directly, rotate each character individually to follow the arc. For a character at angle θ on a circle of radius r, the rotation needed is θ + π/2 (for top) or θ - π/2 (for bottom).

User Controls

Similar to square QR, but with border text options:

// Circle border text inputs
const [circleBorderTopText, setCircleBorderTopText] = useState("");
const [circleBorderBottomText, setCircleBorderBottomText] = useState("");
const [circleBorderTextColor, setCircleBorderTextColor] = useState("#000000");
const [circleBorderTextSize, setCircleBorderTextSize] = useState(16);

Users can specify text for the top and bottom of the circle, customize color and size. Typical use cases:

Top: brand name or promo ("SCAN ME")
Bottom: website or phone ("example.com")

Real-World Usage

This tool shines in practical scenarios:

Use Case	Top Text	Bottom Text
Restaurant menu	"MENU"	"Scan to order"
Business card	"CALL NOW"	"+1-555-0123"
Product packaging	"VIDEO"	"Watch demo"
Event flyer	"REGISTER"	"example.com/events"

Batch Processing

Like the square version, supports multiple URLs at once:

const handleDownloadAll = async () => {
  const zip = new JSZip();
  qrCodes.forEach(({ url, name }) => {
    const base64Data = url.replace(/^data:image\/png;base64,/, "");
    zip.file(`${name}.png`, base64Data, { base64: true });
  });
  const content = await zip.generateAsync({ type: "blob" });
  saveAs(content, "qrcodes.zip");
};

Perfect for printing shops or marketing teams generating dozens of QR codes at once.

Try It Yourself

Check out the live generator at Circle QR code generator. Upload your logo, add some border text, pick your colors—generates instantly in your browser.

Your content never goes to a server. What's entered stays on your device, processed entirely locally.

I Built a Square QR Code Generator That Runs Entirely in Your Browser

monkeymore studio — Sat, 18 Apr 2026 10:14:02 +0000

Ever wondered how those clean, professional QR codes with logos in the middle are made? I recently built a square QR code generator that does everything right in your browser—no server involved. Let me walk you through how it works.

Why Build This in the Browser?

Here's the thing: most QR code generators send your data to a server, which then generates the QR code and sends it back. That means every link you encode gets processed on someone else's machine. For a business generating promo codes or a developer adding company logos, that's not ideal.

By keeping everything client-side, your data never leaves your device. Every link, every piece of text you encode stays private. Plus, it's faster—you don't have to wait for server round-trips. Just load the page, type your content, and download.

For teams handling sensitive links—internal company documents, client information, or anything you'd rather not send to third parties—this approach makes a real difference.

How the Square QR Code Generator Works

Here's the complete flow from user input to downloadable PNG:

Step 1: Capturing User Input

The interface is straightforward. Users paste content into a text area—one entry per line for batch processing:

const [text, setText] = useState("");
const [standardContentType, setStandardContentType] = useState<"none" | "logo" | "centerText">("none");

For batch generation, the code splits input by newline:

const lines = text.split("\n").filter((line) => line.trim());

Step 2: Handling the Center Content

The generator supports three approaches: standard (nothing in center), logo image, or text overlay.

Logo Upload

const handleLogoUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
  const file = e.target.files?.[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onloadend = () => setLogoImage(reader.result as string);
  reader.readAsDataURL(file);
};

Simple enough—reads the uploaded image as a base64 data URL, which the QR rendering library can directly use.

Text Overlay

For text in the center, the code creates an image on-the-fly using canvas:

export function createTextImage(text: string, color: string, fontSize: number): string {
  const size = Math.max(fontSize * 3, 200);
  const canvas = document.createElement("canvas");
  canvas.width = size;
  canvas.height = size;
  const ctx = canvas.getContext("2d")!;
  ctx.font = `bold ${fontSize}px sans-serif`;
  ctx.fillStyle = color;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillText(text, size / 2, size / 2);
  return canvas.toDataURL("image/png");
}

This creates a square image with centered text, ready to embed into the QR code.

Step 3: QR Code Generation

The core generation uses the qr-code-styling library:

const qrCode = new QRCodeStyling({
  width: size,
  height: size,
  type: "canvas",
  shape: "square",
  data,
  image: imageUrl,
  dotsOptions: {
    color: dotColor,
    type: "square",
  },
  backgroundOptions: {
    color: bgColor,
  },
  imageOptions: {
    crossOrigin: "anonymous",
    margin: 10,
    hideBackgroundDots: true,
    imageSize: Math.max(0.01, Math.min(1, logoSize / 100)),
  },
});

Key options explained:

shape: "square" - gives us the classic square module pattern
image - the optional logo/text overlay, centered automatically
dotsOptions.color - the foreground color (default black, customizable)
hideBackgroundDots: true - clears dots behind the logo for cleaner look
imageSize - controls logo size (percentage-based)

Step 4: Exporting the Result

const blob = await qrCode.getRawData("png");
const url = URL.createObjectURL(blob);
const img = await loadImage(url);
URL.revokeObjectURL(url);
return imageToCanvas(img).toDataURL("image/png");

Important detail: the library returns a blob, but we convert it to a canvas then back to dataURL. Why the extra step? Because the raw blob might not play nice with all browsers when displaying in <img> tags. Converting through canvas ensures consistent rendering.

Step 5: Batch Download

For multiple QR codes at once:

const handleDownloadAll = async () => {
  const zip = new JSZip();
  qrCodes.forEach(({ url, name }) => {
    const base64Data = url.replace(/^data:image\/png;base64,/, "");
    zip.file(`${name}.png`, base64Data, { base64: true });
  });
  const content = await zip.generateAsync({ type: "blob" });
  saveAs(content, "qrcodes.zip");
};

Uses JSZip to bundle all generated QR codes into a single ZIP file—clean and efficient for bulk workflows.

Color Customization

Users can customize three colors:

Dot color (foreground) - the actual QR code modules
Background color - the fill between modules
Center text color - when using text overlay mode

All through simple HTML color pickers:

<input
  type="color"
  value={dotColor}
  onChange={(e) => setDotColor(e.target.value)}
/>

Output Size Control

The generator handles standard square output sizes:

const [qrWidth, setQrWidth] = useState(300);
// Clamped between 100-2000 pixels
const size = Math.max(100, Math.min(2000, qrWidth));

300px is the default—good for digital use. For print, bump up to 1000-2000px.

Try It Yourself

The square QR code generator is live at QR code generator. Upload your logo, customize the colors, and generate in seconds.

Need batch processing? Just paste multiple URLs (one per line), and download them all at once.

All processing happens locally—your links never go anywhere near a server.

Building a Browser-Based Image Color Palette Extractor: A Deep Dive into Pure Frontend Implementation

monkeymore studio — Sun, 12 Apr 2026 10:48:49 +0000

Have you ever wondered how to extract color palettes from images without sending your data to a server? In this article, we'll explore how to build a completely client-side color extraction tool that runs entirely in your browser. No uploads, no privacy concerns, just instant results.

Why Build This in the Browser?

When dealing with image processing, the traditional approach involves uploading files to a server, processing them there, and sending results back. But for color extraction, this creates several problems:

Privacy concerns - Users might not want to upload personal photos to unknown servers. Latency - Network round-trips add noticeable delay. Server costs - Image processing consumes CPU and memory resources. Offline capability - A browser-based solution works without internet connectivity once loaded.

By implementing everything in the browser using JavaScript and the Canvas API, we eliminate these issues entirely. The image never leaves the user's device, processing happens instantly, and we don't need to maintain expensive backend infrastructure.

The Complete Flow: From Upload to Palette

Let's visualize the entire process from the moment a user selects an image to when they see their color palette:

This flowchart shows how we transform a raw image file into a beautiful color palette through a series of discrete processing steps.

Core Architecture

Our implementation consists of two main layers: the user interface layer that handles file uploads and displays results, and the color extraction engine that performs the actual analysis.

The UI Layer

The main component manages state and coordinates between user interactions and the extraction engine:

interface ColorInfo {
  rgb: [number, number, number];  // [R, G, B] values 0-255
  hex: string;                     // Hex string like "#e84393"
}

When a user uploads an image, we use the FileReader API to convert it to a data URL, then render it to an HTMLImageElement:

const handleFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
  const file = e.target.files?.[0];
  if (!file || !file.type.startsWith("image/")) return;

  setIsProcessing(true);
  const reader = new FileReader();
  reader.onloadend = async () => {
    const imageData = reader.result as string;
    setImage(imageData);

    // Small delay ensures image is fully rendered
    setTimeout(() => {
      if (imageRef.current) {
        try {
          // Extract dominant color
          const dominantColorObj = getColorSync(imageRef.current);
          if (dominantColorObj) {
            const rgb = dominantColorObj.rgb();
            setDominantColor({
              rgb: [rgb.r, rgb.g, rgb.b],
              hex: dominantColorObj.hex(),
            });
          }

          // Extract 8-color palette
          const paletteColors = getPaletteSync(imageRef.current, {
            colorCount: 8,
          });
          if (paletteColors) {
            const colors = paletteColors.map((color) => {
              const rgb = color.rgb();
              return {
                rgb: [rgb.r, rgb.g, rgb.b] as [number, number, number],
                hex: color.hex(),
              };
            });
            setPalette(colors);
          }
        } catch (error) {
          console.error("Color extraction failed:", error);
        } finally {
          setIsProcessing(false);
        }
      }
    }, 100);
  };
  reader.readAsDataURL(file);
}, []);

Notice the crossOrigin="anonymous" attribute on the image element. This is crucial for accessing pixel data from images loaded from different origins via the Canvas API.

The Color Extraction Engine

The heart of our implementation is the MMCQ (Modified Median Cut Quantization) algorithm. This classic computer graphics technique efficiently reduces millions of colors to a representative palette.

Step 1: Loading and Filtering Pixels

First, we draw the image to a canvas and extract raw pixel data:

function loadFromImage(image: HTMLImageElement): PixelArray {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  canvas.width = image.width;
  canvas.height = image.height;
  context?.drawImage(image, 0, 0);

  const imageData = context?.getImageData(0, 0, canvas.width, canvas.height);
  return createPixelArray(imageData?.data, {
    quality: 10,           // Sample every 10th pixel
    alphaThreshold: 125,   // Skip pixels with alpha < 125
    ignoreWhite: true,     // Skip white pixels
    minSaturation: 0       // Include low-saturation colors
  });
}

The filtering step is important for quality results. We skip transparent pixels and pure white pixels because they don't represent meaningful image colors. The quality parameter lets us trade accuracy for performance by sampling fewer pixels.

Step 2: Building the Color Histogram

To make the algorithm tractable, we reduce the color space from 16.7 million colors (24-bit RGB) to 32,768 colors (15-bit RGB) by using 5 bits per channel instead of 8:

const SIGBITS = 5;                    // 5 bits per channel = 32 levels
const RSHIFT = 8 - SIGBITS;           // Right shift = 3
const HISTO_SIZE = 1 << (3 * SIGBITS); // 32,768 histogram bins

// Quantize a color to 5-bit space
function getColorIndex(r: number, g: number, b: number): number {
  return (r >> RSHIFT << (SIGBITS * 2)) | 
         (g >> RSHIFT << SIGBITS) | 
         (b >> RSHIFT);
}

This quantization dramatically reduces computational complexity while preserving the overall color distribution.

Step 3: The VBox Data Structure

The MMCQ algorithm works by recursively splitting 3D color space volumes called VBoxes (volume boxes). Each VBox tracks the range of colors it contains:

class VBox {
  r1: number; r2: number;         // Red range (0-31, 5-bit)
  g1: number; g2: number;         // Green range
  b1: number; b2: number;         // Blue range
  private histo: Uint32Array;     // Color histogram
  private _volume: number;        // Cached volume
  private _count: number;         // Cached pixel count
  private _avg: [number, number, number]; // Cached average color

  // Calculate volume of this box in color space
  volume(): number {
    if (!this._volume) {
      this._volume = 
        (this.r2 - this.r1 + 1) * 
        (this.g2 - this.g1 + 1) * 
        (this.b2 - this.b1 + 1);
    }
    return this._volume;
  }

  // Count pixels in this box
  count(): number {
    if (!this._count) {
      // Sum histogram values within box bounds
      let count = 0;
      for (let r = this.r1; r <= this.r2; r++) {
        for (let g = this.g1; g <= this.g2; g++) {
          for (let b = this.b1; b <= this.b2; b++) {
            const index = getColorIndex(r << RSHIFT, g << RSHIFT, b << RSHIFT);
            count += this.histo[index] || 0;
          }
        }
      }
      this._count = count;
    }
    return this._count;
  }
}

Step 4: The Splitting Algorithm

Here's where the magic happens. We split VBoxes iteratively until we reach our target color count:

function medianCutApply(histo: Uint32Array, vbox: VBox): [VBox, VBox | null] | undefined {
  // Don't split if box has no pixels
  if (vbox.count() === 0) return undefined;

  // Find the largest dimension (R, G, or B)
  const rw = vbox.r2 - vbox.r1 + 1;
  const gw = vbox.g2 - vbox.g1 + 1;
  const bw = vbox.b2 - vbox.b1 + 1;
  const maxw = Math.max(rw, gw, bw);

  // Build partial sum histogram along largest dimension
  const total = vbox.count();
  const partialsum: number[] = [];
  let count = 0;

  // Accumulate counts along the longest axis
  if (maxw === rw) {
    for (let r = vbox.r1; r <= vbox.r2; r++) {
      for (let g = vbox.g1; g <= vbox.g2; g++) {
        for (let b = vbox.b1; b <= vbox.b2; b++) {
          const index = getColorIndex(r << RSHIFT, g << RSHIFT, b << RSHIFT);
          count += histo[index] || 0;
        }
      }
      partialsum[r] = count;
    }
  }
  // Similar for green and blue...

  // Find median point where we exceed half the total count
  const median = total / 2;
  let splitPoint = -1;
  for (let i = 0; i < partialsum.length; i++) {
    if (partialsum[i] >= median) {
      splitPoint = i;
      break;
    }
  }

  // Create two new VBoxes split at the median
  const vbox1 = new VBox(/* first half */);
  const vbox2 = new VBox(/* second half */);

  return [vbox1, vbox2];
}

The algorithm uses a two-phase approach:

Phase 1 (75% of splits): Split by population, always dividing the box with the most pixels
Phase 2 (25% of splits): Split by count × volume, favoring boxes that are both populous and large in color space

This balanced approach ensures we capture both dominant colors and subtle variations.

Step 5: Creating Color Objects

Once we have our final VBoxes, we extract the average color from each and create rich color objects:

interface Color {
  rgb(): { r: number, g: number, b: number };
  hex(): string;                   // "#ff0000"
  hsl(): { h: number, s: number, l: number };
  oklch(): { l: number, c: number, h: number };
  css(format?: 'rgb' | 'hsl' | 'oklch'): string;
  array(): [number, number, number];
  readonly textColor: string;      // "#ffffff" or "#000000"
  readonly isDark: boolean;
  readonly isLight: boolean;
  readonly population: number;     // Pixel count
  readonly proportion: number;     // 0-1 ratio
}

The color object provides multiple color space representations and automatically calculates contrast information for accessibility:

const getContrastColor = (rgb: [number, number, number]): string => {
  // Calculate perceived brightness using standard weights
  const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
  return brightness > 128 ? "#000000" : "#ffffff";
};

Web Worker Support for Large Images

For large images or when extracting many colors, the quantization step can become CPU-intensive. The library includes optional Web Worker support to offload processing:

// Worker Manager creates an inline worker from a Blob URL
const blobUrl = URL.createObjectURL(
  new Blob([WORKER_SOURCE], { type: 'application/javascript' })
);
const worker = new Worker(blobUrl);

// Message protocol for async processing
worker.postMessage({
  id: requestId,
  pixels: pixelArray,
  maxColors: targetColorCount
});

worker.onmessage = (e) => {
  const { id, palette, error } = e.data;
  if (error) reject(new Error(error));
  else resolve(palette);
};

The worker script is self-contained and embedded as a string, avoiding the need for separate worker files that complicate deployment. This approach uses the Blob URL technique to create an inline worker from source code.

Key Technical Decisions

Why Canvas API over other approaches? The Canvas 2D context provides direct access to raw pixel data through getImageData(). This is faster and more reliable than trying to parse image files manually with JavaScript.

Why 5-bit quantization? Reducing 8-bit channels to 5-bit gives us 32 levels instead of 256. This creates 32,768 possible colors instead of 16.7 million, making the histogram manageable while preserving enough granularity for quality results.

Why two-phase splitting? Splitting purely by population tends to over-represent dominant colors. Including volume in the second phase ensures we explore less dense but visually important regions of color space.

Why synchronous API as default? For most use cases extracting 8-16 colors from reasonably sized images, the synchronous API completes in under 100ms. The complexity of worker coordination isn't worth it unless processing very large images.

Browser Compatibility and CORS

One challenge with client-side image processing is CORS (Cross-Origin Resource Sharing). When loading images from external URLs, the canvas becomes "tainted" and pixel extraction fails. Our solution requires images to be loaded with crossOrigin="anonymous" and the server must include appropriate CORS headers.

For locally uploaded files (via FileReader), this isn't an issue since the data URL inherits the page's origin.

Try It Yourself

Want to extract color palettes from your own images? Our free online tool runs entirely in your browser - no uploads, no waiting, complete privacy.

Try the Image Color Extractor now →

The tool supports JPG, PNG, WebP, and GIF formats. Upload an image and instantly get the dominant color plus an 8-color palette with hex codes ready to copy. Perfect for designers, developers, or anyone who needs to pull colors from images quickly.

Conclusion

Building a browser-based color palette extractor demonstrates the power of modern web APIs. By leveraging the Canvas API for pixel access and implementing classic algorithms like MMCQ in JavaScript, we can perform sophisticated image analysis without any server infrastructure.

The key insights from this implementation:

Privacy by design - Processing happens entirely on the client
Performance through quantization - 5-bit color space reduction makes the algorithm tractable
Quality through smart splitting - Two-phase VBox splitting balances dominant and subtle colors
Flexibility through Web Workers - Optional async processing for demanding use cases

Whether you're building a design tool, analyzing brand colors, or just curious about the colors in your photos, a pure frontend approach offers the best combination of speed, privacy, and cost-effectiveness.

Building a Browser-Based AI Noise Reduction Tool with RNNoise

monkeymore studio — Sun, 12 Apr 2026 08:57:11 +0000

Have you ever recorded audio only to find it's filled with background hum, keyboard clicks, or street noise? Professional noise reduction software can be expensive and often requires uploading your files to the cloud. In this guide, I'll show you how we built an AI-powered noise reduction tool that runs entirely in your browser using RNNoise, the same technology behind our free online noise reduction tool.

Why Browser-Based Noise Reduction?

Before diving into the code, let's talk about why you'd want to process audio locally.

Your Audio Never Leaves Your Device

When you upload audio to cloud services for noise reduction, you're trusting third parties with your recordings. This is problematic for journalists with sensitive interviews, podcasters with unreleased episodes, or businesses with confidential meetings. Browser-based processing keeps everything local.

No Subscription Fees

Professional audio tools like iZotope RX or Adobe Audition cost hundreds of dollars annually. RNNoise is open-source and runs locally, making it completely free to use.

Instant Processing

No upload queues or server wait times. Once the model is loaded, processing happens immediately on your device.

Privacy by Design

Whether you're cleaning up a voice memo, preparing a podcast, or restoring old recordings, your audio stays private.

The Architecture Overview

Our noise reduction tool uses RNNoise, a noise suppression library based on a recurrent neural network (RNN). Here's how the components work together:

Understanding RNNoise: The AI Behind Clean Audio

RNNoise is a noise suppression library developed by Xiph.Org (the creators of Ogg and Opus). It uses a recurrent neural network to distinguish between speech and noise, effectively filtering out unwanted sounds while preserving voice quality.

How RNNoise Works

The model processes audio in small chunks (480 samples = 10ms at 48kHz) and:

Feature Extraction: Converts audio to frequency-domain features
RNN Processing: Feeds features through a recurrent neural network
Gain Estimation: Predicts how much to suppress each frequency band
Signal Reconstruction: Applies gains and converts back to time-domain

The result is audio with significantly reduced background noise while maintaining natural-sounding speech.

Core Data Structures

Let's examine the key data structures in our noise reduction implementation:

Frame Size Constant

// RNNoise processes audio in 480-sample frames (10ms at 48kHz)
const RNNOISE_FRAME_SIZE = 480;

RNNoise is designed to work with 48kHz audio, processing 480 samples at a time (10ms frames).

React State Management

const [audioFile, setAudioFile] = useState<File | null>(null);
const [audioUrl, setAudioUrl] = useState<string | null>(null);
const [processedAudioUrl, setProcessedAudioUrl] = useState<string | null>(null);
const [isProcessing, setIsProcessing] = useState(false);
const [isLoadingModel, setIsLoadingModel] = useState(false);
const [progress, setProgress] = useState(0);
const [error, setError] = useState<string | null>(null);
const [processingTime, setProcessingTime] = useState<number | null>(null);

const rnnoiseRef = useRef<any>(null);
const fileInputRef = useRef<HTMLInputElement>(null);

We track the audio file, processing state, progress (0-100%), and timing information.

The Complete Processing Flow

Here's the entire journey from noisy audio to clean audio:

Loading the RNNoise Model

First, we load the RNNoise WASM module:

useEffect(() => {
  setMounted(true);

  // Load RNNoise WASM module
  const loadRNNoise = async () => {
    try {
      setIsLoadingModel(true);

      // Dynamically import the RNNoise module
      const rnnoiseModule = await import('@shiguredo/rnnoise-wasm');

      // Load RNNoise using the static load() method
      const rnnoise = await rnnoiseModule.Rnnoise.load();
      rnnoiseRef.current = rnnoise;

      setIsLoadingModel(false);
    } catch (err) {
      console.error("Error loading RNNoise:", err);
      setError(t.noiseReductionError || "Failed to load noise reduction model");
      setIsLoadingModel(false);
    }
  };

  loadRNNoise();

  return () => {
    if (audioUrl) {
      URL.revokeObjectURL(audioUrl);
    }
    if (processedAudioUrl) {
      URL.revokeObjectURL(processedAudioUrl);
    }
  };
}, []);

We use dynamic imports to load the WASM module and initialize RNNoise when the component mounts.

The Noise Reduction Process

Here's the complete audio processing pipeline:

const processAudio = async () => {
  if (!audioFile || !audioUrl || !rnnoiseRef.current) return;

  setIsProcessing(true);
  setError(null);
  setProgress(0);

  const startTime = Date.now();

  try {
    // Create denoise state
    const denoiseState = rnnoiseRef.current.createDenoiseState();

    // Load audio file
    const arrayBuffer = await audioFile.arrayBuffer();
    const AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
    const audioContext = new AudioContextClass();
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

    // Convert to mono if stereo
    const sampleRate = audioBuffer.sampleRate;
    const numberOfChannels = audioBuffer.numberOfChannels;
    const length = audioBuffer.length;

    // Get mono data
    const inputData = new Float32Array(length);
    for (let i = 0; i < length; i++) {
      let sum = 0;
      for (let ch = 0; ch < numberOfChannels; ch++) {
        sum += audioBuffer.getChannelData(ch)[i];
      }
      inputData[i] = sum / numberOfChannels;
    }

    // Resample to 48kHz if needed (RNNoise works best at 48kHz)
    let resampledData: Float32Array = inputData;
    if (sampleRate !== 48000) {
      resampledData = await resampleAudio(inputData, sampleRate, 48000) as Float32Array;
    }

    // Process with RNNoise
    const denoisedData = new Float32Array(resampledData.length);

    // Process in frames of 480 samples
    const numFrames = Math.ceil(resampledData.length / RNNOISE_FRAME_SIZE);

    for (let frameIndex = 0; frameIndex < numFrames; frameIndex++) {
      const startIdx = frameIndex * RNNOISE_FRAME_SIZE;

      // Extract frame
      const frame = new Float32Array(RNNOISE_FRAME_SIZE);
      for (let i = 0; i < RNNOISE_FRAME_SIZE; i++) {
        frame[i] = resampledData[startIdx + i] || 0;
      }

      // Convert to 16-bit PCM for RNNoise
      const pcmFrame = floatToPCM(frame);

      // Process frame - returns VAD value, modifies pcmFrame in place
      denoiseState.processFrame(pcmFrame);

      // Convert back to float and store
      const denoisedFloat = pcmToFloat(pcmFrame);
      for (let i = 0; i < RNNOISE_FRAME_SIZE && (startIdx + i) < denoisedData.length; i++) {
        denoisedData[startIdx + i] = denoisedFloat[i];
      }

      // Update progress
      setProgress(Math.round((frameIndex / numFrames) * 100));
    }

    // Clean up denoise state
    denoiseState.destroy();

    // Resample back to original sample rate if needed
    let finalData: Float32Array = denoisedData;
    if (sampleRate !== 48000) {
      finalData = await resampleAudio(denoisedData, 48000, sampleRate) as Float32Array;
    }

    // Trim to original length
    finalData = finalData.slice(0, length) as Float32Array;

    // Create output AudioBuffer
    const outputBuffer = audioContext.createBuffer(1, finalData.length, sampleRate);
    (outputBuffer.copyToChannel as any)(finalData, 0);

    // Convert to WAV
    const wavBlob = audioBufferToWav(outputBuffer);
    const processedUrl = URL.createObjectURL(wavBlob);

    setProcessedAudioUrl(processedUrl);
    setProcessingTime((Date.now() - startTime) / 1000);
    setIsProcessing(false);
    setProgress(100);

  } catch (err: unknown) {
    console.error("Error processing audio:", err);
    const errorMessage = err instanceof Error ? err.message : String(err);
    setError(errorMessage || t.noiseReductionError);
    setIsProcessing(false);
  }
};

Key steps:

Create Denoise State: Initializes the RNN for processing
Decode Audio: Converts uploaded file to raw PCM data
Mix to Mono: RNNoise works on mono audio
Resample to 48kHz: RNNoise's optimal sample rate
Frame Processing: Process 480-sample chunks through RNNoise
Resample Back: Return to original sample rate
Export: Convert to WAV for download

Audio Format Conversions

RNNoise expects 16-bit PCM data, so we need conversion functions:

Float32 to PCM (Int16)

const floatToPCM = (floatArray: Float32Array): Int16Array => {
  const pcmArray = new Int16Array(floatArray.length);
  for (let i = 0; i < floatArray.length; i++) {
    const sample = Math.max(-1, Math.min(1, floatArray[i]));
    pcmArray[i] = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
  }
  return pcmArray;
};

This converts floating-point audio (-1.0 to 1.0) to 16-bit integers (-32768 to 32767).

PCM to Float32

const pcmToFloat = (pcmArray: Int16Array): Float32Array => {
  const floatArray = new Float32Array(pcmArray.length);
  for (let i = 0; i < pcmArray.length; i++) {
    floatArray[i] = pcmArray[i] / 32768;
  }
  return floatArray;
};

This converts back from PCM to floating-point for Web Audio API compatibility.

Audio Resampling

RNNoise works best at 48kHz, so we resample if needed:

const resampleAudio = async (input: Float32Array, fromRate: number, toRate: number): Promise<Float32Array> => {
  const ratio = toRate / fromRate;
  const outputLength = Math.floor(input.length * ratio);
  const output = new Float32Array(outputLength);

  for (let i = 0; i < outputLength; i++) {
    const inputIndex = i / ratio;
    const index = Math.floor(inputIndex);
    const frac = inputIndex - index;

    if (index >= input.length - 1) {
      output[i] = input[input.length - 1];
    } else {
      // Linear interpolation
      output[i] = input[index] * (1 - frac) + input[index + 1] * frac;
    }
  }

  return output;
};

We use simple linear interpolation for resampling. For production use, you might want a higher-quality algorithm like sinc interpolation.

Converting to WAV Format

After processing, we export the clean audio as a WAV file:

const audioBufferToWav = (buffer: AudioBuffer): Blob => {
  const numberOfChannels = buffer.numberOfChannels;
  const sampleRate = buffer.sampleRate;
  const format = 1; // PCM
  const bitDepth = 16;

  const bytesPerSample = bitDepth / 8;
  const blockAlign = numberOfChannels * bytesPerSample;

  const dataLength = buffer.length * numberOfChannels * bytesPerSample;
  const bufferLength = 44 + dataLength;

  const arrayBuffer = new ArrayBuffer(bufferLength);
  const view = new DataView(arrayBuffer);

  // Write WAV header
  const writeString = (view: DataView, offset: number, string: string) => {
    for (let i = 0; i < string.length; i++) {
      view.setUint8(offset + i, string.charCodeAt(i));
    }
  };

  writeString(view, 0, "RIFF");
  view.setUint32(4, 36 + dataLength, true);
  writeString(view, 8, "WAVE");
  writeString(view, 12, "fmt ");
  view.setUint32(16, 16, true);
  view.setUint16(20, format, true);
  view.setUint16(22, numberOfChannels, true);
  view.setUint32(24, sampleRate, true);
  view.setUint32(28, sampleRate * blockAlign, true);
  view.setUint16(32, blockAlign, true);
  view.setUint16(34, bitDepth, true);
  writeString(view, 36, "data");
  view.setUint32(40, dataLength, true);

  // Write audio data
  const offset = 44;
  const channels: Float32Array[] = [];
  for (let i = 0; i < numberOfChannels; i++) {
    channels.push(buffer.getChannelData(i));
  }

  let index = 0;
  for (let i = 0; i < buffer.length; i++) {
    for (let channel = 0; channel < numberOfChannels; channel++) {
      const sample = Math.max(-1, Math.min(1, channels[channel][i]));
      const intSample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
      view.setInt16(offset + index, intSample, true);
      index += 2;
    }
  }

  return new Blob([arrayBuffer], { type: "audio/wav" });
};

This creates a standard WAV file with proper headers and 16-bit PCM data.

Performance Considerations

Frame-by-Frame Processing

RNNoise processes audio in 480-sample frames (10ms at 48kHz). We update progress after each frame to give users feedback:

for (let frameIndex = 0; frameIndex < numFrames; frameIndex++) {
  // ... process frame ...

  // Update progress
  setProgress(Math.round((frameIndex / numFrames) * 100));
}

Memory Management

We clean up resources when done:

denoiseState.destroy();

And revoke object URLs to prevent memory leaks:

const clearAudio = () => {
  if (audioUrl) {
    URL.revokeObjectURL(audioUrl);
  }
  if (processedAudioUrl) {
    URL.revokeObjectURL(processedAudioUrl);
  }
  // ... reset state ...
};

Dynamic Imports

We load the RNNoise module only when needed:

const rnnoiseModule = await import('@shiguredo/rnnoise-wasm');

Browser Compatibility

Our noise reduction tool works in all modern browsers:

Chrome/Edge: Full support
Firefox: Full support
Safari: Full support

Required APIs:

AudioContext: Universal support
WebAssembly: Universal support
fetch: Universal support

What RNNoise Can and Can't Do

Works Well For:

Stationary noise: Air conditioning hum, computer fans, consistent background sounds
Keyboard typing: Mechanical keyboard clicks during voice recordings
Street noise: Distant traffic and urban ambience
Microphone hiss: Low-level analog noise

Limitations:

Non-stationary noise: Sudden loud sounds, music, speech in background
Heavy distortion: Already clipped or heavily compressed audio
Very noisy recordings: When SNR (signal-to-noise ratio) is extremely low

Try It Yourself

Ready to clean up your audio? Visit our free online noise reduction tool and try it out. All processing happens locally - your recordings never leave your device.

Conclusion

Building a browser-based noise reduction tool shows how powerful open-source AI can be:

AI in the browser is practical: RNNoise + WASM delivers professional noise suppression without cloud dependencies.
Privacy by default: Local processing means sensitive audio stays on your device.
Frame-based processing: Understanding audio frame sizes and formats is crucial for DSP applications.
Format conversions: Converting between Float32 and PCM is essential for working with audio APIs.

The complete source is available in our repository. Whether you're building a podcast editor, voice messaging app, or audio restoration tool, I hope this guide helps you add noise reduction to your projects.

Happy audio cleaning! 🎧✨