Skip to content

README.md

Latest commit

 

History

History
66 lines (51 loc) · 1.78 KB

README.md

File metadata and controls

66 lines (51 loc) · 1.78 KB

🥁 JavaScript Drum Kit

A fun interactive drum kit built with vanilla JavaScript. Press keys on your keyboard or click the buttons to play drum sounds!

Features

  • 🎹 9 Drum Sounds - Clap, Hi-hat, Kick, Openhat, Boom, Ride, Snare, Tom, and Tink
  • ⌨️ Keyboard Support - Press A, S, D, F, G, H, J, K, L to play sounds
  • 📱 Mobile Friendly - Click/tap buttons to play on touch devices
  • ✨ Visual Feedback - Keys animate when played
  • 🔄 Rapid Fire - Play multiple sounds simultaneously

How to Use

  1. Open index-FINISHED.html in your web browser

  2. Press keyboard keys A through L to play different drum sounds:

    • A - Clap
    • S - Hi-hat
    • D - Kick
    • F - Open Hat
    • G - Boom
    • H - Ride
    • J - Snare
    • K - Tom
    • L - Tink

  3. Or click/tap the drum pads directly on the screen

Project Structure

├── index-FINISHED.html    # Main HTML file
├── style.css              # Styling and animations
├── sounds/                # Audio files folder
│   ├── clap.wav
│   ├── hihat.wav
│   ├── kick.wav
│   ├── openhat.wav
│   ├── boom.wav
│   ├── ride.wav
│   ├── snare.wav
│   ├── tom.wav
│   └── tink.wav
└── README.md              # This file

Technologies Used

  • HTML5 - Audio elements and structure
  • CSS3 - Styling and key animations
  • Vanilla JavaScript - Event handling and audio playback

Browser Support

Works on all modern browsers that support:

  • HTML5 Audio API
  • ES6 JavaScript
  • CSS3 Transforms

Notes

  • Sounds play with visual feedback (key scale animation)
  • Multiple keys can be pressed simultaneously
  • Audio resets on each keystroke for rapid playback

Enjoy making beats! 🎵