Word Music – A playful interactive keyboard that turns typing into sound
KeySonic is a browser-based musical playground where every keypress becomes sound.
It blends typing, music, and animation into an expressive experience for kids, creatives, and curious minds.
🔗 Live App:
https://seedpaul.github.io/keysonic/
KeySonic transforms your keyboard into a musical instrument:
- Every key press triggers a note
- Typed words become rhythmic melodies
- Visual feedback reinforces sound and motion
- Designed to feel fun, responsive, and a little magical
It’s less about music theory — and more about playful exploration.
- 🎼 Real-time sound playback as you type
- 🎹 Interactive on-screen keyboard
- 🎵 Visual note particles & animations
- 💾 Save and replay typed "songs"
- 🔁 Playback controls (loop, reverse, compose modes)
- 🎛 Optional special modes:
- Super Echo
- Bass Walk
- Visual reactive effects
- 🤖 Floating robot character with reactive behavior
- 🎨 Themed environments (Midnight Neon, Sonic Sands, Winter Groove, etc.)
- Kids and students exploring creativity
- Casual musical experimentation
- Educational demos involving sound + interaction
- Anyone who wants to turn typing into music
- Vanilla JavaScript (ES Modules)
- HTML5 + CSS3
- Web Audio API
- Canvas / DOM-based animation
- No framework, no build step — pure browser execution
To run locally:
git clone https://github.com/seedpaul/keysonic.git
cd keysonicOpen index.html in your browser
or run via IIS / Live Server / any static web server.
For IIS users:
- Point your site to the root folder
- Enable static file hosting
- Disable caching during dev
keysonic/
│
├── index.html
├── style.css
├── keysonic-engine.js
├── keysonic-audio.js
├── keysonic-playback.js
├── assets/
│ └── images / icons / sprites
├── themes/
│ └── theme css files
└── README.md
- 🎚 Advanced audio effects panel
- 🎼 Scale locking & musical modes
- 🎨 Additional animated characters
- 📱 Mobile-optimized layout
- 🎧 Export to audio file (WAV / MP3)
- 🎹 MIDI device support
(Add screenshots or GIFs here showing the keyboard, particle effects, and robot character.)
Paul Seed
Creative developer, educator, mentor
Former Lead Mentor – FRC Team 4041 Gardiner Iron Tigers
Maine, USA
This project is currently intended for educational and creative use.
Feel free to explore, fork, and experiment.
(Add formal license here if you want — MIT recommended.)