Skip to content

Drum Machine built using React, HTML and CSS. Click the link below to try it out.

Notifications You must be signed in to change notification settings

isaiahthedev/drum-machine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Drum Machine

Description:

Welcome to my Drum Machine App, part of my journey in completing the Front End Development Libraries certificate on FreeCodeCamp. The project was built using HTML, CSS, Javascript, and React.

Project Overview

This interactive drum machine allows users to unleash their creativity by playing with 9 dynamic drum pads, each producing unique sounds. With two distinct banks, users can toggle between Trap and LoFi drum sound banks.

Features

  • Bank Selection: Switch between two banks of sounds - Trap and LoFi - each comprising 9 different drum sounds.
  • Display Screen: An LCD screen visually indicates the currently selected sound.
  • Power Button: The power button allows you to control the on/off state of the drum machine.
  • Volume Slider: Adjust the volume of the drum machine with the volume slider.

How to Play

  1. Click on the Live Demo.
  2. Select your preferred sound bank by clicking on the corresponding bank buttons.
  3. Experiment with different drum sounds by clicking on the 9 drum pads or using your keyboard.
  4. Adjust the volume to your liking using the dedicated volume slider.

Project Preview

Drum Machine Preview

Have Fun!

Explore the rhythmic world of the Drum Machine App and have fun experimenting with the drum pads and various sounds. Whether you're an experienced musician or a curious explorer, enjoy playing with the drum machine to create unique musical moments!

About

Drum Machine built using React, HTML and CSS. Click the link below to try it out.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published