Piano Pad
For this next build I took my sons interest in playing music and looked at what I could create with AI.
Day 4. Working with Gemini exclusively this time I built an interactive, multi-instrument web synth. It started initially as a single-note button and developed into a more mobile-friendly looper pad you can play simple tunes on.
Keeping things simple it makes sound using the browser's built-in Web Audio API, which means every note is generated in code with no sample files involved. I added a Piano, Guitar and Drum filters all of which have a... unique sound. With more time I would look at sourcing sounds that more closely mirror the real istruments.
It developed into 24 notes in all. I added multi-touch support and desktop keyboard bindings too, so whether you're on a phone or a laptop you can mash several keys at once and play proper chords. Though for the best experience its best to play on mobile.
Visually, I took a cue from a synth wave reference poster. The interface carries that vertical color gradient the poster does, fading from bright yellows and oranges at the top down through pinks and purples into a deep cyan, all sitting behind 1px grid lines with a tiny white note label tucked into the corner of each pad.
After some feedback from the kids we gave it a simple looper. You can record a 4-second sequence, let it play back on an infinite loop, then switch instruments and play live over the top. Like the Invisible Ink tool it is packaged as a single self-contained HTML file ready to drop onto a page embed element.
