React drum machine feedback with recording functionality

[nzz.coding]

Here is the link to my replit: https://replit.com/@nzzcoding/React-Audio-Pad

There are a lot of optimisations to do of course, but i am quite happy with the result.

Would appreciate some feedback .

[nibble]

Hi @nzz.coding

This is what I see when I navigate to the link you provided above. Is this how it is supposed to be?

[jwilkins.oboe]

Hi @nzz.coding !

I agree with @nibble that the UX is a little confusing.

It took me a while to figure it out but it is not really intuitive yet.

I think it would help if this button said something like switch audio banks.

Also, you have the tooltips that describe what the buttons are doing but it would help if they were labeled above.

I knew they were record and play back buttons but the first time around I skipped the step of adding the track first and then hitting play.

I had originally hit play right after stopping the recording.

I think it is a cool project but I think it could be explained a little better.

Hope that helps!

[nzz.coding]

I didn’t add media queries in styling, the switch audio banks button should be aligned with the top left corner of the audio pad (where there is no border radius).

I agree its not very intuitive, and also the recording functionality should be using async code, so that it can be stopped or configured whenever, right now once the music start playing you can’t stop it.

working on the 25+5 clock right now (will be using hooks instead of monster classes), will optimize this once i finish it.

thank you for the feedback