VINURIRODRIGO / Drum_Kit

This JavaScript project implements a virtual drum kit, allowing users to play various drum sounds by clicking on buttons or pressing corresponding keys on their keyboard.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Drum Kit Project

This JavaScript project implements a virtual drum kit, allowing users to play various drum sounds by clicking on buttons or pressing corresponding keys on their keyboard.

Features

  • Interactive Drum Sounds: The program produces different drum sounds corresponding to each button clicked or key pressed.
  • Button Click Event Listeners: Event listeners are attached to each drum button, triggering the appropriate drum sound when clicked.
  • Keyboard Key Event Listeners: Users can also trigger drum sounds by pressing specific keys on their keyboard.
  • Button Animation: A visual animation effect is applied to each drum button when clicked or pressed, providing feedback to the user.

How to Use

  1. Open the HTML file (index.html) in a web browser to start the drum kit application.
  2. Click on the drum buttons with your mouse or press the corresponding keys on your keyboard to play drum sounds.
  3. Enjoy creating rhythmic beats and experimenting with different combinations of drum sounds.

Drum Sounds

The drum sounds used in the project are stored as audio files in the sounds directory. Each drum sound corresponds to a specific button or key, as follows:

  • w: Tom-1
  • a: Tom-2
  • s: Tom-3
  • d: Tom-4
  • j: Snare
  • k: Crash
  • l: Kick-bass

Button Animation

When a button is clicked or a key is pressed, a visual animation effect is applied to the corresponding drum button to provide feedback to the user. The animation adds a temporary "pressed" class to the button, which is removed after a short delay.

Contributing

Contributions to the Drum Kit project are welcome! Feel free to fork the repository, make improvements, and submit pull requests.

License

This project is licensed under the MIT License. You are free to use, modify, and distribute the code for personal or commercial purposes.

Acknowledgments

  • Inspired by the creativity and musical exploration encouraged by virtual drum kits, this project aims to provide a fun and interactive way to experiment with drum sounds.
  • Thanks to the JavaScript community for providing resources and libraries to facilitate web development projects.

Contact

For any questions or inquiries about the Drum Kit project, feel free to contact vinuri.rodrigo@gmail.com. Enjoy making some beats!

About

This JavaScript project implements a virtual drum kit, allowing users to play various drum sounds by clicking on buttons or pressing corresponding keys on their keyboard.

License:MIT License


Languages

Language:JavaScript 49.8%Language:CSS 31.1%Language:HTML 19.1%