React Drum Machine

OCTOBER 13, 2020 | CODE

This project is part of the front-end libraries certification from freeCodeCamp. This is my first time utilizing HTML audio tag in a web application. Therefore, there are a few lessons learned worth mentioning and noting down.

Rewind Audio

When an application contains multiple audio files, it is important to keep in mind that the audio has to be properly rewound every time before playing. Otherwise the audio will resume from its previous end point if the last play is not fully complete. The following script will reset the start point and rewind the audio:

const audio = document.getElementById('myAudio');
audio.currentTime = 0;

Prevent Keyboard Long-press

The project is responsive and supports cross platform. Therefore, the drum pads have to bind with touch, mouse and keyboard events. However, when a key is long pressed, the audio is in turn triggered and played repeatedly, which causes an extremely annoying experience for a user.The keyboard event API offers an intuitive and easy solution:

cont handleKeyDown = (event) => {
    If (event.repeat) return;
    playAudio();
};

See the LIVE DEMO and the SOURCE CODE of the react drum machine

The contextual rendering of the drum machine
The contextual rendering of the drum machine