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
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
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
Hi Pete, I’ve sent you an email.
Hello,
This is an amazing product. The Kodaly KIBO. How can I get more information about it? I have watched the YouTube video which intrigues me all the more. I am thinking about getting it for my mom with dimentia ( play it with her with my help). She has an older iPad ( what IOS version is required?) I assume the board and shapes only make sound when blue-toothed with the app. What is the silver dial for on the base? I also assume the shape pieces play separately ( in case she has difficulty fitting the shapes into the base template). Can the shapes be played like a xylophone ? So many questions. I’m sorry. I have googled all over. There just isn’t that much. information as to its functions and requirements. If you have time to address my questions or direct me to a place with more information I would greatly appreciate it. I take it you are the developer of the app? thank you so very much again
Pete Gerum