Overview
One of our first projects in the course was a group project where we used HTML, CSS, Bootstrap, p5 library, Tone.js, and vanilla JavaScript to create a functional website. My group consisted of two other folks and myself. Since we all enjoyed music, we decided to develop an interactive drum machine with a space theme.
My role
I was in charge of putting together the drum machine and sample player. One person handled the HTML/CSS and integrated a third-party API to pull in space quotes. Another worked on a sound visualizer and the planets.
For the drum sampler on the main page, I used simple JavaScript to listen for keypresses and mouse clicks to trigger sounds via the Web Audio API. For the drum machine itself, I used an HTML form as the main structure with checkbox inputs as the drum pattern, then looped through the inputs with Tone.js to play the sounds.
What I learned
Working as a group and building something interactive in the browser were both firsts for me on this project. I want to use Tone.js more in the future — I’d like to build a synthesizer with it.