How xhargh/clawford works
Clawford is a browser-based music reference and practice app. A user selects an instrument and tuning, then a key/scale or chord; the app maps pitches to playable string/fret positions and presents them in notation or fretboard views. It also supports note playback, microphone-based tuning, and a configurable metronome. The graph includes settings persistence and the documented PWA offline branch. The excerpts are partial, so links between the app and some renderers or tuner internals are omitted where call ownership is not shown.
Main entry points: app.js App coordinator · index.html App page · mapping.js Note mapping · chords.js Chord logic
Components 28
Music reference
- Instruments
js/instruments.js - Tunings
js/tunings.js - Scales and keys
js/scales.js - Chord logic
js/chords.js - Pitch utilities
js/pitch.js - Note mapping
js/mapping.js - Scale board notes
js/scale-board.js - Notation view
js/notation-renderer.js - Fretboard view
js/fretboard-renderer.js
Practice tools
- Diagram playback
js/playback-interactions.js - Note player
js/audio/player.js - Pluck synthesis
js/audio/synth.js - Tuner lifecycle
js/tuner-lifecycle.js - Microphone session
js/audio/microphone-session.js - Pitch detection
js/audio/pitch-detector.js - Tuner logic
js/tuner.js - Tuner display
js/tuner-renderer.js - Metronome
js/metronome.js - Beat display
js/metronome-renderer.js - Tap tempo
js/tap-tempo.js
App and settings
- App page
index.html - App coordinator
js/app.js - State and URL
js/state.js - Saved settings
js/storage.js
Offline app
- PWA manifest
manifest.webmanifest - Offline caching
sw.js
Other components
- User
- Browser
Connections 33
- User → App page: opens and uses
- App page → App coordinator: loads
- App coordinator → State and URL: builds and encodes
- App coordinator → Saved settings: loads and saves
- App coordinator → Instruments: offers choices
- App coordinator → Tunings: offers choices
- App coordinator → Note mapping: generates notes
- Note mapping → Pitch utilities: converts pitches
- Note mapping → Scales and keys: uses scale data
- App coordinator → Chord logic: generates chord notes
- Chord logic → Pitch utilities: uses pitch data
- Chord logic → Scales and keys: uses scale data
- App coordinator → Scale board notes: generates scale positions
- Scale board notes → Note mapping: maps positions
- App coordinator → Notation view: renders notation
- App coordinator → Fretboard view: renders fretboard
- Notation view → Pitch utilities: parses note names
- App coordinator → Diagram playback: selects voicing
- App coordinator → Note player: plays notes
- Note player → Pluck synthesis: renders plucks
- App coordinator → Tuner lifecycle: starts and stops
- Tuner lifecycle → Microphone session: creates session
- Microphone session → Browser: requests microphone
- App coordinator → Pitch detection: analyzes tuner frames
- App coordinator → Tuner logic: updates tuner
- App coordinator → Tuner display: renders tuner
- App coordinator → Metronome: controls timing
- Metronome → App coordinator: reports beats
- App coordinator → Beat display: renders beat
- App coordinator → Tap tempo: records taps
- App page → PWA manifest: declares installability
- App page → Offline caching: registers
- Offline caching → Browser: caches app shell