gurugu-fcc-projects/fcc__drum_machine

freeCodeCamp --- Front End Libraries Projects - Drum Machine

Drum Machine

Overview

FreeCodeCamp Front End Libraries Project. See project requirements at this freecodecamp page

Demo

Features

• Play different sounds
• Save soundtracks
• Play, edit, delete saved soundtracks

Running the project

Live version:

• This project at codepen
• This project at gh-pages

From the repo:

1. Clone this project
2. Go to the project directory and run npm install
3. Run npm run start
4. Start pressing buttons, playing sounds and creating tracks.

Dependencies

Techstack used when creating this project.

Frontend dependencies

• create-react-app
• react
• uuid

TODOs

• Persist soundtracks for users, so that they can always return and play them
• More sounds

fcc__drum_machine's Issues

Feature --- limit track length

Feature --- add a title Soundblaster-3000 on top of drum machine

Feature --- edit current track

Sounds don't play

Fix --- track playback interval

Currently I have a crude implementation of setInterval that is used to playback the current track. The idea is to use useRef() to implement playback cancel. In that case I won't need to disable "Play" button during playback, because it will turn into a "Stop" button and will be used to stop playback at any point of time.

Feature --- save track