Kibo Keyboard

Kodaly Kibo

Earlier this year Italian company Kodaly proposed a collaboration. They created the Kibo MIDI controller instrument and I enjoy making web apps for musical use. Together we will explore how the Kibo instrument and online apps can be integrated. As a first experiment I made the Kibo Keyboard app.

Kibo Keyboard app

Kibo Keyboard is a simple musical keyboard. It plays just eight notes because the Kibo instrument has eight pads to play MIDI notes with.

The app plays the notes with an added effect: Each time you trigger a note a small ball launches from the bottom of the screen. The ball bounces around and each time it hits another object it repeats its note, with the sound lowering in volume as the ball slows down. This way the bouncing balls create a random delay effect.

You will notice that the harder you hit a note, the higher it sounds. This is because MIDI velocity is used to determine the note’s octave. The harder you hit, the higher the octave. Visually higher octaves are represented as smaller balls.

Try the demo of the app on its Github page. If you don’t have a Kibo or other MIDI controller handy you can use your computer’s number keys 1 to 8.

Demo: https://hisschemoller.github.io/kibo-keyboard/

Or see it in action with the Kibo instrument here:

Kodaly Kibo

Kodaly Kibo

The Kibo is a MIDI controller with eight wooden shapes that can be played like drum pads or piano keys. MIDI transmits wireless over Bluetooth LE or wired via a USB cable.

The Kibo’s eight shapes send MIDI notes with pitch values 60, 62, 64, 65, 67, 69, 71 and 72. If you use another MIDI controller be sure to play these notes.

App settings

Settings panel

The settings panel shows when the app starts. It can be recalled by clicking the cogwheel icon in the top right corner of the screen.

The panel only has two settings:

  • Bluetooth – Click ‘Connect’ to connect to a Bluetooth LE device that transmits MIDI over Bluetooth.
  • MIDI – Select a MIDI input from the dropdown.

Supported browsers

Chrome is currently the only browser that can run the app. The desktop as well as the mobile Android version of Chrome.

Javascript and development

The app uses the Javascript Web Bluetooth and the Web MIDI API to receive MIDI. This is the reason only the Chrome browser is supported.

The bouncing balls behaviour is made with the Planck.js, a JavaScript rewrite of Box2D physics engine.

The project is open source under the MIT license. The complete source in on GitHub: https://github.com/hisschemoller/kibo-keyboard

Leave a Reply

Your email address will not be published. Required fields are marked *

1 + 4 =