Hi guys just finished my drum machine: https://codepen.io/mav1283/pen/yqpdep , what you think? It’s passing all test on Chrome and not on Firefox and Brave, i don’t get past on test 8… Also the progress bar for the volume range isn’t showing up except on Firefox.
2 Likes
I like it a lot. Very good job. The only thing is i don’t hear the sound for “Hi-Hat-Close”. Hope i’m not so deaf 
1 Like
Yea. You made my day Didn’t looked up at my volume.
1 Like
Nice work!! I like the direction you went with your project. Really cool and the sounds were original. When I revisit my own to make improvements in the future I will incorporate some of your features!! I really like my own but I kinda like yours a bit better (a little frustrating to admit…). I applaud you @mav1283 I need to work harder lol.
Check out mine if you like.
2 Likes
@j8ahmed Thanks for your kind words man, yours is cool awesome too, you could add additional functionality to it like add the percentage of volume in the display when you slide the handle… Try using sampleswap: https://sampleswap.org/ it’s where i find and used all my sounds, and it’s also suggested by our fellowcampers , and for your storage Cloudinary: https://cloudinary.com/ again suggested by the awesome community here… I’m working on the calculator now and struggling 
with it
1 Like
Oh that is great! thanks for the links.
I have not started the calculator project yet. I need to pivot a bit before going back in lol.
Also, have you heard any tips from our fellow campers on how to get familiar with github and gain some hands on experience? I am trying to do so before applying for some remote jobs on codepen. I would really appreciate any info. I am just googling away with mediocre results.
1 Like
There’s quite a ton of github tutorials on youtube, here’s my favorite: https://www.youtube.com/watch?v=Y9XZQO1n_7c you just need to download and install git and try the basics like cloning etc, push and pull stuff. if you’re using Visual Studio Code as your text editor it already has it,
1 Like
You have great taste with the layout and UI, for that Drum Machine, I definitely use your project as inspiration for mine. Just finished mine using Vue, here is my copen link https://codepen.io/renmasuo/full/NBJWBg
1 Like
@renmanimel Thanks for the kind words man, yup i wanted it to look like a real drum machine similar to Roland or Yamaha… Your work is beautiful! Just add a padding to the body so it looks good on mobile screens… I hear many great things about Vue, have yet to try it!
1 Like
@mav1283 How long did it take you to complete this project, including the design and react? As in, how many days and hours per day did it take you?
The reason I ask is because looking at it, it seems like it would take may well over a week to do something like that if I were putting in around 4-5 hours a day.
1 Like
@Embustero I guess around 2-3 weeks cause i’m learning other stuff, like going back and forth with css grid 
it was my first time learning react and it’s tough for me, having a hard time with the concept of passing props lol, but i made another one, here’s my pure vanilla js version: https://my-awesome-vanilla-drum-machine.netlify.com/ --> this was based on Wes Bos javascript30 tutorial:https://javascript30.com/ – i highly recommend it just register and follow his tutorial. I based all 2 versions on actual drum machine like roland or yamaha.
There are so many type of drum machines is depends on what you want:
Most drum machines fall into a few categories:
- Sample playback (Roland R8 style)
- Old Analog style machines (Roland Tr 808)
- Hybrid machines (Roland Tr 909)
- Samplers (EMU SP 1200)
- Midi Production Centers with emphasis in internal/external sequencing and sampling (Akai MPC)
- Workstations, similar to number 5 but with built-in sounds and drum synthesizers (Esoniq ASR X)
- Modern Computer Hybrids that require a computer but has a hardware controller to give you the drum machine style workflow (Maschine)
Drum machines nowadays IMO aren’t as important as they used to be because now most DAWs (such as Live) have alot of functionality derived from drum machines. Even some Keyboards like the Roland Fantom works this way as well.
The main thing a drum machine will give you is a different workflow that sometimes can inspire creativity, usually because of great pads or a simple interface. Most of the sounds now can be sampled into just about any type of system. Some old school machines had a sound to them but you could easily just sample the sounds and have some of that feel in a Modern Device or use plug-ins or other type of processing to color sounds. It might take some more time and guesswork to work this way I guess though.
Some of Live’s workflow though seems to be inspired from Old school drum machines like the MPC with its Session View. Live’s workflow though is more detailed though and might have a higher learning curve though but it does share some similar concepts with like Session View Scenes (MPC patterns), Arrange View (Song mode), Drum Racks/Simplers (Sampling functionality of MPC).
2 Likes