Beatbox to Real Drums

Update for Project:

The goal of this project was to create a website that lets users beatbox into their computer microphone, and have it be translated into a real drum beat with real samples.

Rough ideation for how the program could work.

Process for going from beatbox to real drum loops:

1. User beatboxes
2. Computer or phone would record audio
3. Computer would analyze the frequencies of the beatbox
4. Program would analyze which drum samples matches the frequency of the beatbox input.
5. Program would automatically place translated beat into a drum sequencer, and would make available for download.

What were the steps to get to goal?

1. FFT Analyzer —(Completed)

2. Trigger samples based on energy level of frequency buckets — (Not completed)

3. Recording — (Completed)

4. Drum Step Sequencer — (Not completed)

5. Have drums samples triggered, and placed in right place on drum sequencer — (Not completed)

6. Styling and containers — (Completed)

7. Able to download audio as MIDI and WAV form— (Not completed)

FFT Analyzer:

• The FFT (Fast Fourier Transform) is an analysis algorithm that isolates individual audio frequencies within a waveform.
• I used this to analyze the frequencies of audio that is being input via the microphone.
• From there, the idea was to assign a kick, snare, and hi-hat frequencies to the “bass” “lowmid” and “treble” ranges of the FFT.
• When one of these freqs are detected at a certain energy, have the sample be triggered.

Where I ran into issues was with having an audio input triggering the samples. I could not figure out the code to make this work, and could not find references online.

The code I was trying to get to work is on the right:

Let sampler = new Tone.Sampler({“kick drum”: kicksample.mp3});
}
Sampler.toMaster();
function when() {
bass= fft.getEngery(“bass”)>100;
sampler.triggerAttack(“kick drum”);
console.log(kick sample)
}
function when1(){
bass= fft.getEngery(“bass”)<100;
sampletriggerRelease();
function setup() {
}

Energy Level of Frequency Bucketed:

I was able to create buckets for the bass, low mid, mid, high mid, and treble frequencies to be shown through the FFT.

I could also log the frequencies being input through the console.log function and identified which frequencies equated to drum sounds.

Recording:

• I knew that recording functionality would be necessary for this website, and I was able to figure out how to record audio.
• I used the keypress function to start the recording, and have the FFT analyzer change colors for when it is recording, and when recording has stopped. Another ‘R’ press downloads the recording.

Drum Sequencer:

The Drum Sequencer was the most complex piece of the puzzle, and one I am still working on.

In doing research on how to create a functioning step sequencer, it looks like this step on its own could have been a full project.

Developing the code from scratch was way outside my wheelhouse, and requires an in-depth understanding of javascript and python.

Example of Drum Sequencer

To give you an idea of the complexity, this is a github repository of a drums step-sequencer files (not even the actual code)

One of the 4 javascript file had over 9000 lines of code.

This was outside of my expertise with this being my first semester learning to code.

Prototype of Final Product:

• I was able to get the recording functionality, as well as the analysis of frequencies ranges to work.
• I am also able to have the recording download directly as a .wav file.
• Coded the css and html to get the presentation to a workable level, but do not have button functionality, as the step sequencer and code for matching frequency to trigger samples is still incomplete.

Prototype from local file

Conclusion (so far):

I’ve learned so much by doing this project, and feel I got my feet wet in the coding world. This is not a completed project yet, but I plan to continue to work on this and have this complete hopefully by the end of winter break. Talking with my developer friends, they were very surprised that I undertook this project, and told me it would take them, experienced software developers, months to complete. They even said that it would probably need to involve Python, which is something I have zero experience in.

I really want to complete this project, not only for my own portfolio, but I think it would be a very useful tool for music producers in order to have a tool to foster their creativity.

I will continue to update this project as more developments are complete.

Figma design for beatbox-to-drum website