https://github.com/chauxvive/drummachine
Drum Machine is a fun and interactive web app that lets you create beats and play around with drum sounds, whether you're using your keyboard or clicking the on-screen pads.
https://github.com/chauxvive/drummachine
css drum-machine frontend javascript music music-app musical sound soundboard web-audio-api
Last synced: 2 months ago
JSON representation
Drum Machine is a fun and interactive web app that lets you create beats and play around with drum sounds, whether you're using your keyboard or clicking the on-screen pads.
- Host: GitHub
- URL: https://github.com/chauxvive/drummachine
- Owner: chauxvive
- Created: 2024-08-07T20:13:21.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-26T21:48:24.000Z (over 1 year ago)
- Last Synced: 2025-12-27T10:03:20.101Z (6 months ago)
- Topics: css, drum-machine, frontend, javascript, music, music-app, musical, sound, soundboard, web-audio-api
- Language: JavaScript
- Homepage: https://chauxvive.github.io/DrumMachine/
- Size: 523 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Drum Machine
🎧 **Drum Machine** is a fun and interactive web app that lets you create beats and play around with drum sounds, whether you're using your keyboard or clicking the on-screen pads. Great for music enthusiasts, beginners, or anyone who enjoys creating rhythms on the fly!
🔗 **Try it out here**: [Drum Machine Demo](https://chauxvive.github.io/DrumMachine)
---
## 🎵 The Project
This app allows users to tap out beats using an interactive drum pad. You can use either your keyboard or mouse to trigger different drum sounds. The app is built using **React** and **JavaScript**, providing a simple, engaging way to experiment with drum sounds and create your own beats!
### Key Features:
✅ **Interactive drum pads** – Click or use keyboard keys to trigger sounds
✅ **Keyboard shortcuts** – Press `Q`, `W`, `E`, etc., for different sounds
✅ **Realistic drum sounds** – Authentic drum kit samples
✅ **Responsive design** – Works seamlessly on desktop and mobile devices
✅ **Minimalist UI** – Focus on simplicity with no distractions
---
## 🔧 Technologies Used:
- **JavaScript** – For managing functionality and sounds
- **CSS** – Styling and layout for a clean look
- **Sound Library** – Drum sounds triggered via JS
---
## 🛠️ How to Run Locally:
Clone the repository
```bash
git clone https://github.com/chauxvive/DrumMachine.git
## 🔹 How to Run Locally
1. **Clone the repository**
```git clone https://github.com/chauxvive/DrumMachine.git```
2. **Navigate to the project folder**
```cd DrumMachine```
4. **Install dependencies**
```npm install```
6. **Start the development server**
```npm run dev```
8. **Open the app in your browser**
Visit:
```http://localhost:5173/```
---
## 🔹 Who Am I?
I’m a **Software Developer & Marketing Specialist** from Connecticut, open to new roles in **development, project management, and design-driven tech solutions**.
📩 **Let’s connect!** [LinkedIn](https://www.linkedin.com/in/mpauldesigns/) | [GitHub](https://github.com/chauxvive)