Some time ago i built a fun little music visualizer that reads a MIDI file and generates a 3D piano roll in sync with the music. The project combines music and 3D graphics for a creative coding experience.
🧠 Idea
The concept is simple: load a MIDI file, and use Three.js to create the 3D visuals triggered by the notes. Tone.js handles the MIDI playback, and everything runs in the browser.
🔧 Tech Stack
- Three.js for 3D rendering
- Tone.js for MIDI playback
- Vite for bundling and development
- TypeScript for type-safety and cleaner code
🎮 Try it live
👉 Live demo on Surge
📦 Source code on GitHub
🧩 What could be better
Some parts of the code are a bit rough. Still, it's fun to share this as-is!
💭 Let me know what you think
Thanks for reading, and I hope you enjoy the music! 🎧✨
Top comments (0)