Hey guys today I want to share a Drum Machine application that I built using. https://www.onlinetool.in/drum-machine/. Used Web Audio API to built it. The web audio api was initially proposed by google is used for processing and synthesising audio in web applications.
Initially, I tried building this application using the HTML5 audio element but it caused inconsistent timing and low latency.
A drum machine (a type of music sequencer) is basically used to program your own rhythm. It imitates a real drum kit. It can be used as a backing track to play any instrument like guitar, synthesizer… Its helpful in writing your own songs and accompanying in live performances.
Users can set their custom beat pattern or select any of the given preset patterns like rock, funk, hiphop. The pattern can be changed in real time (on the fly) without any interruption. It has a 16th note timing grid. Tempo can be adjusted using the input field.
Interface is designed using bootstrap and logic using VueJs and JavaScript/JQuery.
So far its a basic application. I have plans to further extend its functionality like:
- individual gain control over the pads like Kick, Hithat, Shaker
- adding effects like reverb, echo, panning and different filters
- graphic visualiser
- Users will be able to save their patterns as a .wav file and play it anywhere.
I will come up with another post describing its technical flow.
Hope you like it and thanks for reading 🙂