Project case study
CFJams — Browser Music Tools
Two shipped browser applications for exploring scales and chords and practicing timing, built with on-device audio processing and a privacy-conscious Cloudflare delivery path.
Current status
Deployed under CF Builds; Scale Explorer and JamCheck are publicly available.
Technologies
- JavaScript
- Web Audio
- Cloudflare Workers
- Turnstile
- Node.js
- HTML
- CSS
Problem
Musicians need focused practice tools that work without installing software or sending microphone audio to a remote service. The project needed to make music-theory exploration and timing feedback approachable while handling browser permissions, live audio resources, accessibility, and production delivery responsibly.
Solution
- Built and deployed Scale Explorer for mapping guitar and bass scales, chords, and playable shapes with local synthesized previews.
- Built JamCheck for tap- or microphone-based timing practice with explicit microphone opt-in and focused session feedback.
- Created shared browser-audio lifecycle controls so tuner and timing workflows release media tracks, audio contexts, and ownership when sessions change or end.
- Shipped CFJams under CF Builds as a static-first product with a narrowly scoped feedback workflow.
Technical highlights
- JavaScript modules and Web Audio for pitch, onset, timing, synthesis, fretboard, and chord-shape behavior.
- On-device microphone analysis that does not upload or retain visitor audio.
- Cloudflare Workers Static Assets with a validated, Turnstile-protected feedback endpoint that sends email without storing submissions.
- An allowlisted public build and automated coverage for music engines, audio-resource lifecycle, accessibility, metadata, artifact containment, and security behavior.
Tradeoffs
- On-device audio protects privacy and reduces backend scope, but browser capabilities, device permissions, and input conditions vary.
- A static-first architecture keeps hosting and maintenance small, while shared metadata and configuration require deliberate synchronization.
- The narrow feedback boundary avoids accounts and submission storage, trading a richer support system for a simpler and more privacy-conscious operational model.
What this demonstrates
- Shipped product delivery from interactive browser behavior through cloud hosting and feedback operations.
- Browser-audio state, permission, and resource-lifecycle engineering.
- Practical privacy, security, accessibility, and responsive-design judgment.
- Automated testing and release discipline across application and public-artifact boundaries.