A Drum Kit for Oliver

My grandson Oliver is 9 months old and he is one of my favourite humans. Oliver really likes flashy screens and smashing things, so I thought I'd knock-up a quick drum kit for him to smash his little hands on.

The code for this drum kit is really quite basic and didn't take long to create. First off, I downloaded some royalty free drum SFX as MP3 files from YouTube using Parabolic. I then created some SVG images in Inkscape to represent some drums and cymbals. As mentioned, Oliver is only 9 months old, so I decorated the images with Fluent Emoji, courtesy of Microsoft. Finally, I arranged the images in a grid with CSS and hooked-up the SFX to click events in JavaScript using howler.js.

Interestingly, or not, I did experience some unexpected issues with the demo whilst testing it on my iPad:

• Firstly, the touch/click events on the button elements did not trigger the pseudo :active CSS class, which I used to provide some user feedback in the form of CSS transform: scale(1.3); rule. This was fixed by adding the ontouchstart attribute to the button elements.

• Secondly, if I touched the images for too long (I was trying to emulate what a 9 month old would do), it triggered the touch callout menu, which I didn't want. This was fixed by adding the -webkit-touch-callout: none; CSS rule to the image elements.

Some more issues occurred when Oliver first played with the drum kit:

• It turns out that a 9 month old baby has not quite developed the motor skills to perform 1 finger touch gestures. Oliver's default hand gesture is to place all his digits on the screen, before performing a grabbing motion. This would result in Oliver inadvertently scaling the demo/viewport. I fixed this by adding the following CSS rule that I found on Stack Overflow:

:root {
    touch-action: pan-x pan-y;
    height: 100% 
}

• Oliver's lack of motor skills also meant that using all his digits did not always trigger the SFX to play. I fixed this by making the event listener fire on both touchstart and click events.

I put this demo together thinking it would just be a bit of fun, but I ended up performing UX research with my 9 month old grandson, haha. In any case, if anyone was wondering, Oliver loves his drum kit.