Virtual Kalimba Web Audio App Gets Real

Virtual Kalimba is a Web Audio App that uses the Web Audio API to recreate a kalimba, also known as an mbira or thumb piano. This modern take on the traditional African instrument became a reality earlier this year when I began investigating the Web Audio API. As I learned what it could do, I started applying this knowledge to my passion for melodic percussive music.

* Keep in mind you need Chrome or Safari for this web app to work!

Try out my Virtual Kalimba

This web app allows you to play a Virtual Kalimba in your browser. It uses the Web Audio API to load audio files into a buffer and trigger them when a user hovers over the tines. Version 1.0 was finished on 03/01/2013 and was fairly basic. Almost instantly, I started thinking about how to improve my new creation.

Upgrades in Progress

For the last month or so, I’ve been tinkering in the lab and working on various ways to improve the Virtual Kalimba. One of the first things I noticed when playing it, was that the level was very hot. There was also a tendency for the sound to peak, especially when multiple tines were activated rapidly. To solve the hot level issue, I added a master gain to reduce overall volume. To solve the peaking sound issue, I added a compressor to equalize the dynamics of the mix.

Control Panel

The sound was much cleaner, but I soon realized there would have to be a way to adjust the volume. While contemplating where to place the control, I started to think about other attributes that might need to be adjustable. It became obvious that there should be an entire section dedicated to controls. So I added the Control Panel. It currently includes six horizontal sliders. These sliders control Volume, Pan, Lowpass Frequency, Lowpass Resonance, Highpass Frequency, and Highpass Resonance.

Thanks to the new controls, the Virtual Kalimba is now much more playable. By adjusting the control sliders, the sound can be customized. Crank up the Lowpass Frequency for more bottom end. Drop the Lowpass Frequency and boost the Highpass Frequency for less bottom end.

Modulation Effects

Real kalimbas often have a sound hole that can be covered and uncovered to create a filter modulation effect. This effect sounds much like a wah-wah pedal for a guitar. Recreating that classic kalimba sound hole modulation effect is easy. First, strike the tines. While they are still ringing, slide the Highpass Frequency control all the way to the left and back to center.

Also, when a real kalimba moves while playing, a phasing effect is often heard. This effect can be reproduced with the Virtual Kalimba by sliding the Pan control back and forth after striking the tines.

Keyboard Shortcuts

To be able to modify the sound in real time, I mapped three QWERTY keyboard keys to each of the controls. They’re laid out in a logical grid to match the control panel. For instance, the Shortcut Keys for Volume are [1], [2], and [3]. Press [1] to set the volume to 20%. Press [2] to set the volume to 50% which is the default. Press [3] to set the volume to 80%. The Shortcut Keys for Pan are [4], [5], and [6]. These keys can all be pressed while playing the Virtual Kalimba to achieve real time changes to the sound.

The sound hole modulation effect can be done with one hand while the other is playing the tines. Press [A] and [S] back and forth repeatedly while activating tines to get a good modulation. Try it a bit faster or slower to hear the difference. To achieve a phasing effect while playing, press [4] and [6] back and forth repeatedly. If you’re handy enough, both effects can even be done simultaneously.

With all these shortcut keys, some cool stuff can be done. However, they are no good unless users know about them. I created the Keyboard Shortcuts section to serve as a guide and reference. This section lists all available keyboard shortcuts and explains what each does. They are organized by control into six, easy to read, lists.

Tips & Tricks

To help new users figure out how to play the Virtual Kalimba, I created the Tips & Tricks section. This section contains, yep, you guessed it, Tips & Tricks. Information and advice can be found regarding tuning, playing, and modulating the Virtual Kalimba.

Options Menu

There is now an options menu that toggles hidden content from the three new sections. Pressing one of the buttons shows content from the corresponding section. Pressing another button hides the visible content and shows it’s content instead. To hide the contents from any open section, simply press it’s corresponding button in the menu.

Arrangement Menu

One feature that existed on version 1.0 was the arrangement menu. This menu originally linked to a separate HTML file for each different layout. I wanted the layouts to be switched dynamically without leaving the page. Like the options menu, I used JavaScript toggle buttons to accomplish this. The layout of the tines can now be changed without interruption of the resonating audio signal.

Virtual Kalimba Web Audio App Gets Real

Virtual Kalimba is now more fun, and more realistic than ever. Version 1.5 is bringing the heat! There is still room for improvement though. I’ll continue applying my knowledge of the Web Audio API to my passion for melodic percussive music until the Virtual Kalimba is as useful as a real kalimba.

Go ahead and try it. I welcome any suggestions for improvement you might have. Just leave a comment below and I’ll see what I can do about implementing it. Keep in mind you need Chrome or Safari for this web app to work!

Try out my Virtual Kalimba

Or check out the official Virtual Kalimba Documentation Page