Project: Drum Machine, feedback please

Project Feedback
#1

Hey, I would love some feedback, this is my project!

Thank you!

1 Like
#2

Hi @maxnazor

I cannot help you with JS, but I will give you some CSS suggestions for p element wich holds the chords name:

p {
  font: 3em bolder;
  color: rgba(133, 39, 134);
  margin-left: 1em;  or  text-align: center;
  color: white; // or other with more contrast
  }

And maybe some funny names to your chords.
It looks great by the way!! Great job!! :ok_hand: :clap: :clap:

1 Like
#3

Looks great! Love how clean and crisp it all looks and the background suits the sound of the drum pads too. Love it!

One issue that the tests didn’t seem to catch is that if I press a key, it’ll always play the last sound that I clicked, rather than the pad associated with the keypress. See if you can fix that.

I also have a couple challenges for you. And I know these can be done with the Audio API because I’ve done it myself:

  1. Play multiple sounds “simultaneously”. I want to be able to press a drum pad in combination with others. I also want to be able to press a drum pad multiple times in a row and hear a hit without having to wait until the first sound stops playing.
  2. This one is more advanced and you should only do it if you either, have a bit of background in digital audio, or are curious enough to learn. Once you figure out the first challenge, remove the distortion and delay that happens when you play too many sounds at once, or play them too fast, too close together.

Good luck!

1 Like
#4

Thank you so much! now i see the problem , pressing the keys only plays the last sound and if i want to press only the keys the audio doesn’t play; I’m gonna fix that, that 's why feedback is so important, thank you!

I’m gonna check the Audio API and see what I can do :slight_smile: !

1 Like
#5

The tests for this project expect that you are calling play directly on the <audio> element so I think you will find that you won’t pass some of the tests if you switch to Audio API :frowning: If you are going for this certification and need to pass this test then I suggest you do the minimum to get this working properly and pass all the tests and then create a second version using the Audio API and have fun.

2 Likes
#6

Yeah that’s exactly how I’ve approached these projects in the past too. Solid advice :ok_hand:

Just FYI; you can still call .play() on the audio element while working with an audio context.

Just as an example:

const audioEl = document.getElementById('Q')
audioEl.onplay = () => audioCtx.resume()

const audioSource = audioCtx.createMediaElementSource(audioEl)
audioSource.connect(audioCtx.destination)

audioEl.play()

I don’t want to give away the solution to my challenge so there’s more to it than just that. But that’s the gist for how you connect an HTMLAudioElement to an Audio Context.

And to save others the trouble this is the approach you probably want to take when loading your audio files. The other approach involves making an HTTP request and parsing a BufferArray which gets a little more complicated than you probably want for just loading some audio data into memory.

#7

In my experience, these two lines are what the tests want and what I was referring to above. You are calling the play method directly on the <audio> element. You might be able to do other things as well without breaking the tests, but at a minimum you need to make sure to do the above.

2 Likes
#8

Exactly. That was the point I was trying to make. Sorry if that wasn’t clear!