Beatbox to Drums Project - Please help a noob!

Github folder for project

Hi Everyone!

This is my first time posting here and I am very new to coding. I am in over my head with a project I decided to do, so I was hoping for some help.

I am attempting to create a website that will essentially record a user beatboxing (making drum patterns with your mouth), have the website analyze the frequencies and match the sounds to the closest sounds from drum samples I will include in the project folder.

I know, not a great starter project, but I am determined to get it done!

I have been using the P5.JS library of functions to make it happen. They have a lot of the functionality I need, and to start I am trying to basically combine the following functions in Javascript:

-p5.AudioIn and a p5.Recorder
-FFT analyzer (to find the frequency spectrum of audio input from mic)
-Save this data using the save() method, as JSON or just Strings

So far, I have been able to get the mic to work, and to do live frequency analysis, but I can’t figure out in the code where to put the p5.Recorder function and save() functions…

Additionally, after I figure this out, I will need to have some kind of matching where when the it hears a kick drum sound from the beatboxer, for example, it matches the frequency that the user has input and replaces it with the sample drum sounds (which I will add to the project folder).

There is also the issue of how to either replace the beatbox sound with the sample sound, or to create a new .wav or .midi file so the drum beat can be utilized on a DAW…

Sorry, I know that’s a lot, but if anyone can help me in anyway with the order of operations at least for including the recording function with the save function, that would really be helpful. Thanks in advance!