This is my grid keyboard with accompanying drum grid. The purpose of the website is for musicians to be able to quickly try out their ideas or jam out with friends when other instruments are not at hand - just plug your laptop into a speaker!

The name grid comes from the CSS grid-layout that has a consciously evident role in the layout and design of the page. Structuring the keyboard and buttons in a distinct grid-structure reminded me both of very unorganic, digital design, and old mechanical and architectural sketches. My idea was to combine those two concepts - the mechanical drawing and the digital design - by initially dislaying the look of a hand drawn sketch that comes to life and transforms into the more digital design with the press of a button.

The website is still a work in progress, and some obvious issues still need fixing. E.g. issues with handling multiple simultaneous calls to the web audio api; tweaking and improving the synths; tweaking levels; adding functionality such as instrument gain control etc. I will continue to make updates as I solve these issues.

I’m a recent mechanical engineering graduate with interests in design and music. Front-end programming was not part of my university curriculum, so I decided to spend the last year trying to learn the basics of it – the goal of which was to be able to create a website of acceptable standards, within a year.

Contact

philip.horstmann@gmail.com

LinkedIn

Music has always been a passion of mine and I’ve often found myself frustrated with the lack of free websites that allow for improvisation and playing around with song ideas, when I’ve not had a suitable DAW or instruments at hand. There are of course a plethora of apps and websites that serve this very purpose, but the options I found, didn't entirely suit my needs.

Some of them I found too complex, allowing for full musical arrangements – essentially lighter versions of expensive DAWS, e.g. Garage Band. However, I sometimes find the complexity to be a hinder to the free flowing of ideas – too many options can be paralyzing. Other websites and apps limit the freedom of musical expression – by only allowing prerecorded melodies to be played at the press of a button. And many options were just not free.

As I continued learning front-end programming I came across 3 main components: CSS Grid, 3D transitions and animations, and Web Audio API. Thus, given the need for free online keyboards and with the necessary tools now available to me, I thought, why not build my own keyboard website?

As I set out, I was primarily focusing on one thing: simplicity without limiting expression too much. That is, no complicated synthesizers with too many options and parameters, but neither should there be any prerecorded melodies or scales. I wanted to develop a website that could aid in experimenting with and trying out song ideas when a melody suddenly pops into your head. A whiteboard or sketchbook for audio, that is available to you at all times. Additionally, it could be used to jam along with your friend when said friend unexpectedly pulls out a guitar and starts playing the 12 bar blues. The goal was not to compete with premium production software and DAWS, but to create something that was fast and available everywhere: A simple keyboard, with a simple drum grid.

Finally, I must add that I am well aware that I am reinventing the wheel here. There may certainly be other good free alternatives out there - even though I personally haven’t found them yet - and if so, here's another one! As Cato the Elder used to say: "The more free online keyboards the merrier."

The website is coded in HTML, CSS and vanilla JS. Some SVG filters have been used on text, lines, and buttons to create paper/charcoal/ink like effects. Everything is essentially programmed from scratch (apart from a few SVG filters, and some drum synthesizing). This includes all sounds – drums as well as keyboard – which are synthesized using the Web Audio API - i.e. no audio samples are used.

I’ve taken inspiration from some developers concerning SVG filters, timer functions, and sound design etc. So I guess a thank you is in order! I will list them below and what their solutions helped me on. Credit where credit is due, and the sources may help someone else out if they're working on a similar project.

SVG filters

These filters were used to create charcoal and ink effects on the text, as well as the paper like appearance of the background.

Free SVG editor

Great resource for creating SVGs and exporting them for free. Without having to sign up for another account to do so.

Button Shadow source

Helped me create smoother and more realistic looking box shadows.

Box shadow generator

A free box generator inspired by the previous article on the topic.

Snare and Hihat sounds - article

This resource provided me with the synthetic sounds of the hihat and the snare.

Clap sound - video

A video showing the synthesizing of an 808-style clap sound using Serum. The method inspired the way I programmed my clap sound.

Lo-fi Rhodes - video

The video was used as the inspiration for the rhodes instrument.

Garage Bass - video

A helpful video tutorial on how to synthesize a UK garage bass in Serum.

Pluck sound - article

This article is on the methods of modeling an acoustic guitar and helped me when synthesizing my pluck sound.

Delay effect - article

A helpful article that explains how to create a echo delay effect using the Web Audio Api.

Timer function

The solution to this stack overflow - although it has some flaws - served as the inspiration for my timer function that controls the execution of drum sounds.

I have with without a doubt forgotten to mention some of the sources that has been of use to me, but I will continue to update the list if I anything comes to mind.

Apart from the aforementioned sources I've drawn much of my knowledge from MDN Web Docs, various Stack Overflow threads, and online courses - for example LinkedIn Learning.