JSFiddle - React, Tailwind, and code Playground

by gustav75

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Drums</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #333;
            color: white;
            font-family: Arial, sans-serif;
        }
        .drum-pad {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-gap: 20px;
            margin-top: 50px;
        }
        .pad {
            width: 100px;
            height: 100px;
            background-color: #555;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            border-radius: 10px;
            user-select: none;
        }
        .pad:active {
            background-color: #777;
        }
    </style>
</head>
<body>
    <h1>Web Drums</h1>
    <div class="drum-pad">
        <div class="pad" data-sound="kick">Kick (1)</div>
        <div class="pad" data-sound="snare">Snare (2)</div>
        <div class="pad" data-sound="hihat">Hi-Hat (3)</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

#E2F6D5

JavaScript

const sounds = {
    kick: new Audio('https://static.wixstatic.com/mp3/efdc4b_25353dc62f3b41e1bd71001b22b767a9.wav'),
    snare: new Audio('https://static.wixstatic.com/mp3/efdc4b_e79caa7bfe0a4b33a1acdb68badd9ae7.wav'),
    hihat: new Audio('https://static.wixstatic.com/mp3/efdc4b_f34e4b39a7b546ac9e1d75b4f07f17d7.wav')
};

document.querySelectorAll('.pad').forEach(pad => {
    pad.addEventListener('click', () => {
        const sound = pad.getAttribute('data-sound');
        sounds[sound].currentTime = 0; // Reset audio to start
        sounds[sound].play();
    });
});

document.addEventListener('keydown', (event) => {
    let sound;
    switch(event.key) {
        case '1':
            sound = 'kick';
            break;
        case '2':
            sound = 'snare';
            break;
        case '3':
            sound = 'hihat';
            break;
        default:
            return; // Exit if other key is pressed
    }
    
    sounds[sound].currentTime = 0; // Reset audio to start
    sounds[sound].play();

    // Optional: Add a visual feedback by triggering click event on the corresponding pad
    document.querySelector(`.pad[data-sound="${sound}"]`).classList.add('active');
    setTimeout(() => {
        document.querySelector(`.pad[data-sound="${sound}"]`).classList.remove('active');
    }, 100);
});