Beat Maker

Link: https://beatmaker-create-music.netlify.app/

Project description:

It is a personal project that introduced me in the web application world, I learned a lot about OOP concepts and played with JavaScript ins and outs. It is a drum pad for the music creators and has three types of sounds for each drum.

Features:

• Create new project
• Save the current project
• Load the saved project
• Play your created project
• Stop playing your current project
• Erase the creation of your current project
• Change the type of drum sound

Technologies used:

• JavaScript
• HTML
• CSS

The structure of the project:

• This project takes advantage of the integrated local storage of your website. Every new project created is stored in the local storage.
• There are 8 drums on each of the 3 columns
• Each of the 3 columns have 3 sounds that you can select from and each of the columns will play based on those 3 sounds.
• The entire song will be composed by the drums that you clicked on
• Play button will play the drums that you clicked on
• Load button will load the song that was created from the local storage
• Stop button stops the song
• Erase button erase just the drums that you clicked on
• Save button is saving all the drums that you clicked on in order to produce a song in the local storage
• And new project erase the drums that you clicked on until that moment and save them and allows you to create a new song after.
• The level in the middle controls the BPM of your song.

Pictures: