I worked on my version of a drum machine for a week. I did not create it to fulfill the FCC project, but I will eventually convert it to a React project once I figure out how to deal with the known bugs (listed below) and fulfill the required user stories.
I have seen some incredible layouts in other’s drum machine projects. While the look and feel of my drum machine is “weak” compared to some of those layouts, I have not seen anyone include some of the features mine has (i.e. sequencer), so I am posting it here for others to see and play with.
If anyone sees any additional bugs, just let me know and I will put them on my “Fix” list. Also, if anyone has any suggestions on how to fix any bug you find or any of the bugs I have documented below, please let me know.
FYI - I am also quite aware that use setTimeout to control the playback of the sequencer is not as good as using the Web Audio API. It is something I plan to do when I create the React version though and have more time to dig into the Web Audio API documentation.
My design is fairly plain, because CSS and page layout is not my forte. However, it is the functionality that I had the most fun with. A week ago, I created a much more basic “proof of concept” of the drum machine with more procedural functions. I could see as I added more features, it was turning into “spaghetti code”, so I tried to make this newer version a little more object oriented and modular.
It will be fun converting it to React/Redux in the next couple of weeks. I am sure I will run into some more obstacles, because I am still a newbie with Redux.
On Safari, when using the keyboard or the mouse, there is a major delay when playing the sounds and you can not play another sound until one finishes. I spent a long time trying to figure out a solution, but finally gave up.Figured this one out (see discussion below).
The gradient background does not work in Safari, but I know I have to changed the syntax to get it to work.
Sometimes during sequence playback, the timing gets off slightly (due to using setTimeout).
There is no quantization implemented to help make sounds close together play at the same time during playback. I am currently working on an algorithm to make this a realty and plan to implement it with the React version.
During playback of a sequence, I tried to make the background change only with the bass sounds (Q, E, Z, X), but something is not quite right with the logic, because sometimes when bass sounds play, the background remains as the black/white gradient. Ideally, I want to figure out how to use a css animation which fires instead of using the setTime, so I am open for suggestions.