Etuttino

BeatConfused

A small web studio of fast, elegant, install-free music tools. Every tool is plain HTML, CSS and vanilla JavaScript with the Web Audio API — no build step, no dependencies, no accounts, works offline after first load.

Live at beatconfused.com.

Tools

Repository layout

index.html            Studio landing page (tool cards + JSON-LD)
styles.css             Landing-page styles
metronome/             Metronome — index.html, script.js, styles.css, Assets/
tuner/                 Tuner — index.html, script.js, styles.css
strobetuner/           Octave Strobe Tuner — index.html, script.js, styles.css
multistrobe/           Chromatic Strobe Tuner — index.html, script.js, styles.css
luthier/               Luthier Tuning (spectrogram) — index.html, script.js, styles.css
etutti/                eTutti (work in progress, unlisted) — Web MIDI page, Teensy firmware/,
                       hardware/ (eTuttino board v0.7 + case SPEC v9), manuais/, models/
binfacevsfarage/       Standalone browser game (not linked from the studio)
shared/                Assets shared across tools
CNAME, robots.txt, sitemap.xml   Hosting + crawl metadata

Metronome controls

Tempo

• Slider / input field — smooth or direct BPM entry (40–240)
• +/- buttons — step by 5 BPM
• Tap tempo — tap the button or press T to detect BPM
• Arrow keys — Up / Down to adjust BPM

Beat settings

• Time signature — organized simple, compound and odd meters
• Beat subdivision — split each beat into more pulses
• Tempo counting — beat count, measure + beat, or hidden
• Beat visual — pulse, numbers, or pendulum
• Sound style — electronic, bossa, jazz, wood, cymbal, cowbell
• Sound / vibration toggles and volume control

Keyboard shortcuts

• Space — start / stop
• Arrow Up / Down — BPM ±5
• T — tap tempo

Custom sounds

Drop {style}_{accent|beat|subdivision} audio files (.mp3, then .ogg, then .wav) into metronome/Assets/ and they replace the synthesised click for that combination. Anything not supplied keeps the built-in sound, so the metronome always has audio even with no custom assets.

Tuner controls

• Start Tuner — vintage-style slide switch above the display; turns the microphone on. A "no signal" sign appears below the display after ~3s of silence while running.
• Display — needle, strobe or LED meter
• Input Monitor and Test Tone — collapsed by default; microphone gain boost and a live level meter, plus a pure tone (with its own frequency, fine-tuning and volume controls) fed straight into the tuner and the speakers, no mic needed — the same panel /strobetuner/ and /multistrobe/ use too
• Spectrum Analyser — vintage or modern style
• Tuning Standard and Reference Pitch — Equal Temperament plus Vallotti, Young II, 1/4-comma meantone and Just Intonation (each built from first principles), and an A4 reference from 392–466 Hz with historical presets (French Baroque, Baroque, Verdi, Standard, Modern, Italian Renaissance)
• Frequency Table — every note of an 88-key piano (octaves down the rows, notes across the columns) under the selected Tuning Standard and Reference Pitch, with a live cents deviation next to whichever note is sounding

Luthier Tuning controls

• Start Listening — the same slide switch as the tuners (or Space)
• Full range / Audible only — everything the microphone captures (up to half its sample rate, with infrasound and ultrasound shaded) or just 20 Hz – 20 kHz
• Live curve — the current spectrum; each frequency falls back at the Decay speed (dB/s) so a note's ring-out stays visible
• Peak hold — the pale-blue background graph: the loudest level each frequency has reached since the last Reset peak hold. On keeps it until reset; Temporary holds each maximum for 2 s, then lets it fall at the same Decay speed as the live curve; Off hides it
• Sustain history — a 12-second waterfall under the display
• Cursor — hover / tap for frequency, nearest note, live and peak dB, plus dashed guides at 2×, 3×, 4×… to judge inharmonicity
• Input gain — boosts quiet instruments

Technical stack

• HTML5 / CSS3 — semantic structure, gradients and animations
• Web Audio API — high-precision timing, autocorrelation pitch detection, Goertzel per-octave analysis for the strobe tools
• Vanilla JavaScript — no dependencies, no build step
• Structured data + crawl files — JSON-LD, robots.txt, sitemap.xml

Development

Everything is static — serve the repo root with any static file server:

git clone https://github.com/dataehora/beatconfused.git
cd beatconfused
python3 -m http.server 8000
# then open http://localhost:8000/

Deployment

Served via GitHub Pages on the beatconfused.com domain (CNAME). Any static host with HTTPS works — no server-side code.

License

MIT License — feel free to use and modify.

Contributing

Contributions are welcome. Please open a Pull Request.