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! 🎧✨