Offline First Drum Machine
A browser-based drum machine that goes offline without dropping a beat
I was watching a documentary about the making of Blondie’s Parallel Lines album and they mentioned the drum machine at the start of Heart of Glass. It’s a Roland CR-78, which currently go for around £1500 on the second-hand market. I thought, “I could build one of those in JavaScript.”
So here it is:
You can try it yourself!
How does it work?
First there are samples of the drum sounds as WAV files. Then we have a web page that allows the user to edit the timeline of each sound — 32 placeholder checkboxes which are ticked to make a sound and unticked to stay silent.
The sounds are played using the Howler,js library and rendered on the page using the latest Bootstrap 4 markup. The awesome Vue.js library orchestrates the movement of data between the web page and our JavaScript code.
A sample composition looks like this in JavaScript:
The sequence object defines when the instruments play, the bpm is how fast the loop is played (in beats per minute) and sequenceLength limits how many notes make up the sequence.
Your precious compositions can be saved in your web browser using a PouchDB database.
How is it Offline First?
Not only is your data safely stored in your web browser’s internal storage, the whole web page (HTML, CSS, JavaScript and audio) are cached using a Service Worker. This means that once the page has been loaded, subsequent visits can come from cache even if your machine is not online.
Offline First websites not only allow your users to interact with your website with patchy or non-existent service, they also improve performance under even the best network conditions by retrieving assets from local cache super fast.
If you want to see how this works so that you can make your website Offline First, then check out the source code for yourself. Or see a real CR-78 in action here.
And for your listening pleasure, Drummer in action:
