Drum-Machine/README.md at main · aftabstackcraft/Drum-Machine · GitHub

https://github.com/aftabstackcraft/Drum-Machine/blob/main/README.md • 237 KB fetched
Open original page

Drum-Machine/README.md at main · aftabstackcraft/Drum-Machine · GitHub

Skip to content

Navigation Menu

Sign in Appearance settings

* Platform
* AI CODE CREATION
* GitHub Copilot Write better code with AI

* GitHub Copilot app Direct agents from issue to merge

* MCP Registry Integrate external tools

* DEVELOPER WORKFLOWS
* Actions Automate any workflow

* Codespaces Instant dev environments

* Issues Plan and track work

* Code Review Manage code changes

* Code Quality Enforce quality at merge

* APPLICATION SECURITY
* GitHub Advanced Security Find and fix vulnerabilities

* Code security Secure your code as you build

* Secret protection Stop leaks before they start

* EXPLORE
* Why GitHub

* Documentation

* Blog

* Changelog

* Marketplace

View all features

* Solutions
* BY COMPANY SIZE
* Enterprises

* Small and medium teams

* Startups

* Nonprofits

* BY USE CASE
* App Modernization

* DevSecOps

* DevOps

* CI/CD

* View all use cases

* BY INDUSTRY
* Healthcare

* Financial services

* Manufacturing

* Government

* View all industries

View all solutions

* Resources
* EXPLORE BY TOPIC
* AI

* Software Development

* DevOps

* Security

* View all topics

* EXPLORE BY TYPE
* Customer stories

* Events & webinars

* Ebooks & reports

* Business insights

* GitHub Skills

* SUPPORT & SERVICES
* Documentation

* Customer support

* Community forum

* Trust center

* Partners

View all resources

* Open Source
* COMMUNITY
* GitHub Sponsors Fund open source developers

* PROGRAMS
* Security Lab

* Maintainer Community

* GitHub Stars

* Archive Program

* REPOSITORIES
* Topics

* Trending

* Collections

* Enterprise
* ENTERPRISE SOLUTIONS
* Enterprise platform AI-powered developer platform

* AVAILABLE ADD-ONS
* GitHub Advanced Security Enterprise-grade security features

* Copilot for Business Enterprise-grade AI features

* Premium Support Enterprise-grade 24/7 support

* Pricing
Search /

Sign in
Sign up Appearance settings

You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.
You switched accounts on another tab or window. Reload to refresh your session.

Dismiss alert

aftabstackcraft

/

Drum-Machine

Public

*
Notifications
You must be signed in to change notification settings

*
Fork
0

*

Star
0

*

Code

*

Issues
0

*

Pull requests
0

*

Actions

*

Projects

*

Security and quality
0

*

Insights

Additional navigation options

*

Code

*

Issues

*

Pull requests

*

Actions

*

Projects

*

Security and quality

*

Insights

Files Expand file tree

main

Breadcrumbs

* Drum-Machine
/ README.md

Copy path

Blame
More file actions

Blame
More file actions

Latest commit
 

History
History
History

46 lines (35 loc) · 1.16 KB

main

Breadcrumbs

* Drum-Machine
/ README.md

Copy path

Top

File metadata and controls

* Preview

* Code

* Blame

46 lines (35 loc) · 1.16 KB

Raw
Copy raw file
Download raw file

Outline Edit and raw actions

🥁 JavaScript Drum Machine

An interactive Drum Machine built with HTML, CSS, and Vanilla JavaScript.
This project allows users to play different drum sounds by clicking on the on-screen drum pads or pressing the corresponding keyboard keys. It demonstrates DOM manipulation, event handling, keyboard interactions, and the HTML Audio API while providing a clean and responsive user interface.

✨ Features

* 🎵 Play drum sounds using mouse clicks

* ⌨️ Keyboard support (Q, W, E, A, S, D, Z, X, C)

* 📺 Real-time display showing the currently playing drum sound

* 🎨 Responsive and modern user interface

* ⚡ Built with Vanilla JavaScript

* 🔊 Uses the HTML Audio API

🛠 Technologies

* HTML5

* CSS3

* JavaScript (ES6)

📚 What I Learned

While building this project, I practiced:

* DOM Manipulation

* Event Listeners

* Keyboard Events

* Audio API

* Data Attributes ( data-* )

* Reusable Functions

* Debugging Event Handling

🎮 Controls

Action
Key

Drum Pad 1
Q

Drum Pad 2
W

Drum Pad 3
E

Drum Pad 4
A

Drum Pad 5
S

Drum Pad 6
D

Drum Pad 7
Z

Drum Pad 8
X

Drum Pad 9
C

Footer

(c) 2026 GitHub, Inc.

Footer navigation

*
Terms

*
Privacy

*
Security

*
Status

*
Community

*
Docs

*
Contact

*

Manage cookies

*

Do not share my personal information

You can’t perform that action at this time.

Links found on this page

1. Skip to content [direct]
2. Sign in [direct]
3. GitHub Copilot Write better code with AI [direct]
4. GitHub Copilot app Direct agents from issue to merge [direct]
5. MCP Registry Integrate external tools [direct]
6. Actions Automate any workflow [direct]
7. Codespaces Instant dev environments [direct]
8. Issues Plan and track work [direct]
9. Code Review Manage code changes [direct]
10. Code Quality Enforce quality at merge [direct]
11. GitHub Advanced Security Find and fix vulnerabilities [direct]
12. Code security Secure your code as you build [direct]
13. Secret protection Stop leaks before they start [direct]
14. Why GitHub [direct]
15. Documentation [direct]
16. Blog [direct]
17. Changelog [direct]
18. Marketplace [direct]
19. View all features [direct]
20. Enterprises [direct]
21. Small and medium teams [direct]
22. Startups [direct]
23. Nonprofits [direct]
24. App Modernization [direct]
25. DevSecOps [direct]
26. DevOps [direct]
27. CI/CD [direct]
28. View all use cases [direct]
29. Healthcare [direct]
30. Financial services [direct]
31. Manufacturing [direct]
32. Government [direct]
33. View all industries [direct]
34. View all solutions [direct]
35. AI [direct]
36. Software Development [direct]
37. DevOps [direct]
38. Security [direct]
39. View all topics [direct]
40. Customer stories [direct]
41. Events & webinars [direct]
42. Ebooks & reports [direct]
43. Business insights [direct]
44. GitHub Skills [direct]
45. Customer support [direct]
46. Community forum [direct]
47. Trust center [direct]
48. Partners [direct]
49. View all resources [direct]
50. GitHub Sponsors Fund open source developers [direct]
51. Security Lab [direct]
52. Maintainer Community [direct]
53. GitHub Stars [direct]
54. Archive Program [direct]
55. Topics [direct]
56. Trending [direct]
57. Collections [direct]
58. Copilot for Business Enterprise-grade AI features [direct]
59. Premium Support Enterprise-grade 24/7 support [direct]
60. Pricing [direct]
61. Sign up [direct]
62. aftabstackcraft [direct]
63. Drum-Machine [direct]
64. Notifications [direct]
65. Issues 0 [direct]
66. Pull requests 0 [direct]
67. Actions [direct]
68. Projects [direct]
69. Security and quality 0 [direct]
70. Insights [direct]
71. Drum-Machine [direct]
72. History [direct]
73. Raw [direct]
74. Terms [direct]
75. Privacy [direct]
76. Security [direct]
77. Status [direct]
78. Community [direct]
79. Contact [direct]