Browser-Based Composition Tool

A lightweight, no-install chord sequencer built entirely in the browser. Type a chord name, get the notes. Pick some notes, get the chord. Loop it, arpeggiate it, share it via URL.

What It Does

The core idea is bi-directional conversion between chord names and their component notes. This solves two common scenarios:

« I know I want an Am7, what notes is that? » — Type Am7 and the tool populates A, C, E, G in the note grid.

« I’m playing these notes, what chord is this? » — Select notes manually and the tool identifies the chord for you.

Beyond identification, it’s a functional sequencer. Build progressions up to 16 chords, adjust tempo, choose your playback style, and hear the results immediately through Web Audio synthesis.

Features

Chord Library

Supports 28 chord types including extended and altered voicings:

• Triads: major, minor, dim, aug, sus2, sus4, power
• Sevenths: 7, maj7, min7, dim7, aug7, min7b5, 7sus4
• Extended: 9, maj9, min9, add9, minadd9, 11, min11, 13, min13
• Altered: maj7#11, 7#9, 7b9

Six note slots per chord handle complex voicings. The parser recognizes common notation variants — Cm, Cmin, C- all resolve to C minor.

Playback Engine

• Tempo: 40-200 BPM
• Waveforms: Sine, triangle, sawtooth, square
• Beats per chord: 1, 2, 4, or 8 beats
• Play modes: Single pass or continuous loop

Arpeggiator

Three modes with configurable step count (1-8):

• Chord: Repeats the full chord. 4 steps = 4 chord hits per beat allocation
• Up: Ascending through notes, cycling if steps > notes
• Down: Descending pattern

Example: A minor (A, C, E) with 4 steps in Up mode plays A → C → E → A.

State Persistence

The entire pattern encodes to a URL parameter. Copy the link, send it to someone, they load your exact progression with all settings intact. No accounts, no backend, no data collection.

Technical Implementation

Stack: React 18 with inline JSX, transpiled client-side via Babel standalone. Single HTML file, zero build step required.

Audio: Web Audio API with basic envelope shaping. Each note creates an oscillator node, applies a gain envelope (attack + exponential decay), then self-destructs. The AudioContext initializes on first user interaction to comply with autoplay policies.

Chord Detection: Brute-force interval matching. Notes convert to MIDI values, calculate intervals from bass note, normalize to single octave, then compare against the chord definition table. Checks all possible root positions to catch inversions.

URL Encoding: Pattern state serializes to JSON, encodes as base64, appends as ?data= parameter. Parsing happens on mount via useEffect.

The no-build approach means slightly slower initial load (Babel compilation) but eliminates deployment friction. For a tool this size, the tradeoff is worth it.

Use Cases

Songwriting scratch pad — Quickly test whether a progression works before committing to a DAW. The loop function lets you sit with an idea.

Learning tool — See the relationship between chord names and note structures. Useful for understanding how adding a 7th or 9th changes the voicing.

Communication — Share a progression with a collaborator via URL instead of trying to describe it over text.

Sound design starting point — The raw oscillator tones aren’t meant for production, but they’re useful for testing harmonic relationships before layering proper patches.

Transcription aid — Manually input notes you’re hearing and let the tool suggest what chord it might be.

Limitations

This isn’t a DAW. No velocity, no custom envelopes, no effects chain, no MIDI export. The synth is intentionally primitive — just enough to hear the notes, not enough to distract from the compositional work.

Chord detection has edge cases. Slash chords, polychords, and heavily altered voicings may not resolve cleanly. The algorithm prioritizes common interpretations.