🎵 Sound of Code
Turn your code into music. Every keystroke becomes a note. Keywords are piano chords, brackets are percussion, strings are synth pads. You'll hear when your code gets complex.
Features
- Real-time audio synthesis — Web Audio API generates notes as you type, no sample files needed
- Token-aware mapping — keywords, strings, numbers, operators, brackets, and functions each have distinct sounds
- 4 instrument presets — Synth (default), Piano, Chiptune, and Ambient
- Depth-aware octaves — code deeper in the file plays in lower octaves
- Pentatonic scale — always sounds musical, never jarring
- Error scratches — a vinyl scratch sound plays when diagnostics detect errors
- Live visualizer — waveform bars, particle nebula background, scrolling note feed
- Sonic Risk Radar — live structural-risk score with dissonance cues as complexity grows
- PR Diff Sonification — analyze
git diff and play risk motifs for control-flow and guard changes
- Merge Conflict alarm — aggressive alert tone when conflict markers are present
- PR Audio Summary export — one-command markdown report of diff metrics and risk motifs
- Configurable — volume, instrument, musical key, error sounds on/off
Quick Start
- Clone this repo and open it in VS Code
- Run
npm install
- Press F5 to launch the Extension Development Host
- Start typing in any file — the visualizer opens automatically
- Use Ctrl+Shift+M (Cmd+Shift+M on Mac) to toggle sound on/off
Commands
| Command |
Shortcut |
Description |
Sound of Code: Toggle Sound On/Off |
Ctrl+Shift+M |
Mute/unmute |
Sound of Code: Open Visualizer |
— |
Open the visualizer panel |
Sound of Code: Change Instrument |
— |
Pick synth/piano/chiptune/ambient |
Sound of Code: Sonify Current Diff |
— |
Analyze current git diff and play risk motifs |
Sound of Code: Export PR Audio Summary |
— |
Generate sound-of-code-pr-audio-summary.md |
Settings
| Setting |
Default |
Description |
soundOfCode.volume |
0.3 |
Master volume (0.0 – 1.0) |
soundOfCode.instrument |
synth |
Sound preset |
soundOfCode.musicalKey |
C |
Musical key for generated notes |
soundOfCode.errorSounds |
true |
Play scratch on errors |
soundOfCode.riskRadar |
true |
Enable live risk radar analysis and sonification |
How It Works
Your Keystrokes
│
▼
┌─────────────┐ ┌──────────────┐ ┌────────────────┐
│ Text Change │────►│ Token Mapper │────►│ Audio Engine │
│ Listener │ │ (categorize) │ │ (Web Audio API)│
└─────────────┘ └──────────────┘ └────────────────┘
│ │
▼ ▼
┌──────────────┐ ┌────────────────┐
│ Note Feed │ │ Waveform Bars │
│ (scrolling) │ │ + Particles │
└──────────────┘ └────────────────┘
Token → Sound Mapping
| Token Type |
Sound Character |
Example |
| Keywords |
Strong, distinct |
const, return, if |
| Functions |
Warm, mid-range |
forEach(, map( |
| Strings |
Smooth, sustained |
'hello', "world" |
| Numbers |
Bright, short |
42, 3.14 |
| Operators |
Crisp, sharp |
=, =>, && |
| Brackets |
Percussive, quick |
{, }, (, ) |
| Comments |
Soft, fading |
// todo |
| Deletions |
Low, reversed |
Backspace/delete |
Language Support
Token detection is language-aware with built-in keyword sets for:
- JavaScript / TypeScript / JSX / TSX
- Python
- Go
- Rust
Other languages fall back to the JavaScript keyword set, which covers most C-style syntax.
Extending
Add a new instrument preset:
Edit the playNote() switch statement in the webview HTML. Each preset configures oscillator type, filter, and envelope.
Add a new language:
Add a keyword set to KEYWORDS in src/tokenMapper.ts.
Add new visualizer effects:
The webview uses vanilla JS — modify the Particle class or add new canvas effects in the animateBg() loop.
Publishing
npm install -g @vscode/vsce
vsce package # creates sound-of-code-0.1.0.vsix
vsce publish # publishes to VS Code Marketplace
License
MIT
| |
