An interactive JavaScript project simulating a digital drum machine using keyboard keys. Each key plays a sound and triggers a visual animation, allowing users to play rhythms in real time.
JS Drum Kit Pro is a compact and responsive browser-based drum pad app built with vanilla JavaScript, HTML and CSS. You can play beats using your keyboard or by clicking on the pads. Designed to be minimal yet responsive, it creates a snappy interaction with multiple sounds overlapping thanks to dynamic audio instancing.
This project was developed as an exploration of:
- Event handling with
keyevents - DOM manipulation using
data-*attributes - Audio playback behavior in web browsers
- Creating lightweight audio visual feedback in UI
Un proyecto interactivo en JavaScript que simula una máquina de ritmos digital usando teclas del teclado. Cada tecla reproduce un sonido y activa una animación visual, permitiendo tocar ritmos en tiempo real.
JS Drum Kit Pro es una app interactiva para navegador que simula un kit de batería digital, construida con JavaScript, HTML y CSS puro. Permite ejecutar ritmos con el teclado o con clics en pantalla, ofreciendo retroalimentación visual por cada golpe.
El proyecto explora:
- Manejo de eventos con
key - Manipulación del DOM con
data-* - Comportamiento de audio en navegadores
- Feedback visual sincronizado con los sonidos