7uner

A chromatic and instrument tuner, guitar practice exercises and a Guitar Pro tab player that run in the browser. No server, no build step, no dependencies: plain HTML, CSS and JavaScript.

Files

index.html            Page skeleton (Tuner, Practice and Tab Studio pages)
css/style.css         All styles (light and dark themes)
js/pitch.js           Pitch detection (McLeod / NSDF), shared by anything that listens
js/tuner.js           Tuner: microphone input, string detection, pitch trace
js/voice.js           Voice: pitch trail, range finder, singing exercises, song key helper
js/alphatab.js        Loads alphaTab once for Practice and Tab Studio
js/exercises.js       Practice catalogue: names, descriptions, tempos
js/practice.js        Practice: plays the exercise files with alphaTab, in a loop
js/tab-studio.js      Tab Studio: opens, plays, loops and edits Guitar Pro / MusicXML files (alphaTab), and scores singing along with a vocal track
js/amp.js             The amp: drive and volume for everything alphaTab plays, and Tab Studio’s mix
js/metronome.js       The metronome beside the amp: swings at the playing tempo, sets tempo and click volume
js/app.js             Switching between #tuner, #practice and #tab-studio, offline support
practice/*.gp         The Practice exercises as Guitar Pro 7 files (generated, see below): <id>.gp, or <id>-p<n>.gp per position
tools/                Dev-only scripts (Node): exercise files, asset hashes, git hook; not needed to run the site
tests/                Node tests (pitch detection); not needed to run the site
sw.js                 Service worker: caches the app and the exercise files for offline use
manifest.webmanifest  Lets the app be installed to the home screen
favicon.svg
icons/                App icons (192, 512, maskable, apple-touch-icon) and the link-preview image, drawn by tools/make-icons.js
.nojekyll           Turns off Jekyll processing on GitHub Pages

Running locally

Most browsers block the microphone on file:// pages, so start a small local server:

python3 -m http.server 8000
# open http://localhost:8000

Practice exercise files

The notes of every Practice exercise are stored as Guitar Pro 7 files in practice/, so they render and play exactly like files opened in Tab Studio (and can be opened in Guitar Pro). They are generated from the definitions in tools/make-practice-files.js and the catalogue in js/exercises.js. After changing either, regenerate them with Node:

cd tools && npm install && npm run practice

The script reads every file back after writing it and stops if any note differs. A new exercise needs an entry in js/exercises.js and, for techniques, its notes in the script; the service worker picks up the new file automatically.

Icons

The PNG app icons and the link-preview image (icons/social.png, 1200×630, used by the Open Graph and X/Twitter tags) are drawn from the logo's shapes by a small Node script with no dependencies. After changing the logo, run:

node tools/make-icons.js

Tests

The pitch detector is tested with Node, no browser needed: sines and sawtooths at known frequencies, from a 5-string bass's low B to the top of the chromatic range, at 44.1 and 48 kHz, must come back within 1 cent.

node --test tests/*.test.js

Cache-busting asset URLs

Every CSS and JS link in index.html carries a hash of the file's content (css/style.css?v=36afc388), and so do the exercise files and the service worker's precache list. When a file changes, its URL changes, so a CDN or browser cache can't serve an old stylesheet next to new HTML. (In front of 7uner.com, Cloudflare keeps CSS and JS for hours; without this, a deploy can show the new page with the old styles.)

The hashes are written by tools/stamp-assets.js. Run it before committing, or let git do it by turning on the hook in tools/hooks once per clone:

git config core.hooksPath tools/hooks

The hook stamps and re-adds index.html, sw.js and js/exercises.js to the commit.

Publishing with GitHub Pages

1. Create a new repository (e.g. 7uner) and put the contents of this folder at its root.
2. Go to Settings > Pages > Source: Deploy from a branch, Branch: main, folder: / (root).
3. After a minute or two the site is live at https://<username>.github.io/7uner/.

Using your own domain

1. Enter the domain (e.g. 7uner.com) under Settings > Pages > Custom domain. GitHub adds a CNAME file to the repository automatically.
2. In your domain provider's DNS settings:
   • Four A records for the apex domain (7uner.com): 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
   • One CNAME record for www pointing to <username>.github.io
3. Once DNS has propagated, tick Enforce HTTPS. Browsers only allow microphone access over HTTPS, so this step is required.

Notes

• The tuner's instrument picker sits in the header, beside the logo (icon buttons; a row of its own on a phone). The gauge is the same size in every mode.
• Voice (the microphone in Practice's picker, beside the guitar) is for singing. Your pitch draws a line across a staff of semitones as it scrolls left. A range finder takes the lowest and highest notes you hold steadily and says which voice type the range is closest to. Eight listen-and-sing exercises (match a note, long tones, five-note scale, major arpeggio, minor pentatonic, fourths and fifths, half steps, octave leaps) are built in that range: each round plays the notes as dashed bars, then you sing them back into filled ones, scored as the share of time within 40 cents (an octave either way counts), with the best score saved. A song helper compares a song's lowest and highest notes with your range and says how far to move it, in guitar terms (tune down, capo). Its microphone turns off when you leave Practice or switch to the guitar.
• Until the microphone is on, the tuner (and Voice’s staff) is greyed out under a card with the microphone button. Once the browser remembers the permission, the microphone comes on by itself whenever the tuner or Voice is on screen (if the browser keeps the audio paused until a click, it starts at the first click or key press).
• The microphone stays on until you leave the tuner page (or the tab goes to the background).
• The tuner has a Chromatic mode, which works with any instrument and shows the nearest note, and modes for guitar, bass, ukulele, violin and cello. Guitar follows six target strings, starting from standard tuning; each string can be moved up or down by a semitone, and common presets (drop D, E♭ standard, drop C, drop A and others) are one click away. Three small buttons under the headstock each open a bubble: a round one with the number of strings written over a faint fretboard, the tuning’s name, and a round one with the reference pitch (440 Hz). The first picks 6, 7, 8 or 12 strings for guitar (7: B E A D G B E and drop A; 8: F♯ B E A D G B E and drop E; 12: six courses, octave pairs on the lower four) and 4, 5 or 6 for bass (5: B E A D G; 6: B E A D G C); the headstock is redrawn to match (3+4, 4+4, 6+6, 2+3, 3+3 posts) and the choice is saved. The fretted headstocks are drawn as one family: guitars after the ESP Eclipse (black face with cream binding, gold tulip tuners, a bound dark rosewood fretboard with a faint grain), the bass after the Rickenbacker 4003 (a hooked head with a notch and a point, dark brown, chrome cloverleaf keys, the logo running up a white truss cover, a lighter brown fretboard with a triangle inlay), the ukulele as a plain paddle of clear acrylic that lets the history behind it show through, with ivory buttons and a black fretboard. The 7uner logo always has its own space (on the bass, along the truss cover). Cello: C G D A. The violin and the cello share one varnished head, the violin 10% smaller and the cello a darker brown, with the pegs where they sit on the real instruments.