Introduction: Synthesizer: a Keyboard UI With Audio Output
We built a keyboard UI with five synthesis modes all in Javascript, to show the power of using the audio output hardware pins of Kinoma Create. You can download the open source project now to run in the Kinoma Create simulator.
Using the audio output hardware pin is the most flexible and the most complex way to play sounds from the Kinoma Create. It is referenced in this Tech Note.
Parts List:
You can see this entire project using Kinoma Studio, and analog input simulator. However, to build it physically or make any additional modifications, you will want the actual parts. Here we used the Grove Rotary Angle Sensor. But any potentiometer or analog input will do.
- Download Kinoma Studio
- Kinoma Create
- Grove Rotary Angle Sensor
- Breadboard jumper wires(M-M)
Step 1: Wiring
The wiring is trivial. Simply connect the ground, power, and analog input to the front pins.
In the program, the analog input is set to pin 54. You can use the front pins app to configure it like so.
Step 2: The Code
This project added to the original synthOut.js BLL with synthesizer functions for additional sound modes. It also includes the analog.js BLL and pin simulator runtime for analog input support. Additionally, it has an asset (synthiconsborder.png), which is used as a texture to create the application UI.
The complete project, including code, assets and BLLs is available here on GitHub.
Step 3: UI Templating
This project uses a texture for the mode selection. The code of the skin of the texture UI is as follows.
This sets the variants and states of the skin, which are then applied to the button content. Each button is instantiated by the content template.
These buttons are then contained within a button container, and instantiated by the container.
The keys and keyboard are instantiated in a similar way. These use solid skins.
All of these elements also have behaviors associated with them. By using the onTouch method in a container, the hit testing for the buttons is configured.
Having a functional UI is important for a wide variety of projects.
Step 4: Sounds Synthesis
This article by Rodrigo Siqueira is a good resource for finding out what functions produce what kinds of sound. However, keep in mind that Kinoma Create’s sampling rate will be 4~8kHz, and will only support 3~5 different tones at once. If you examine the synthesizer functions in synthOut.js, you can see how the different synthesizer modes are being created. In this project, the sampling rate is set to 4k.
This supports five tones, but is poorer sound quality than an 8kHz sampling rate. However at that rate, only three tones are supported at once, therefore the violin sound mode ceases to operate properly.
As you can see, the violin synth mode adds together different wave forms. This calculation requires too much CPU at an 8kHz sampling rate for Kinoma Create to handle in real time.
Step 5: The Analog Input
The analog input part is included to show how simple it is to include a hardware input, and affect the operations of some other piece of hardware, such as the audio output. If you do not have a Kinoma Create or potentiometer handy, you can use the device/analog simulator to see how it behaves. In this project, we have the analog input adjusting the output amplitude (volume). However, you could also easily change it to adjust the frequency output as well, or do something else, alongside the sound creation.
Once the analog pin is configured, the application polls the analog input every 20 milliseconds.
Then the callback is bound, and inside the keyboard container we set the amplitude of the synthesizer.
Step 6: Finish
Simply run the code to start the synthesizer program. If you’re running in simulator, you can adjust the analog input as desired. If running on Kinoma Create, you need the potentiometer attached and setup to hear the sound correctly.
Congratulations!
You’ve done it! Or if you got stuck along with way, we’re here to help — come visit us at our forum and let us know how we can help.
