| pageid |
|---|
Overview |
{% include_relative gnavi.html %}
webaudio-controls is a Javascript library to display the GUI components used in Web Music Applications.
webaudio-controls consists of knobs, sliders, switches, parameter displays and keyboards.
By loading webaudio-controls.js to your page, custom tags for component display will be added using WebComponents.
You can configure the GUI screen just by writing custom tags in HTML.
webaudio-controls is consist of following components.
| Component | Description |
|---|---|
| webaudio-knob | Rotating or some other frame-by-frame animation knobs. |
| webaudio-slider | Vertical or Horizontal slidesrs. |
| webaudio-switch | Toggle / Kick / Radio switches. |
| webaudio-param | Editable value display field that can auto-link to knobs or sliders. |
| webaudio-keyboard | Mouse / Touch playable keyboard. multi-touch support. |
Chrome / Firefox / Edge compatible iOS and Android touch devices compatible
This is an example of a typical GUI screen created using webaudio-controls. Knobs, sliders, switches etc. can be manipulated with a mouse or touch device. It is also possible to operate from a connected MIDI controller.
Each component fires an event when manipulated and can be handled by a javascript program.
GitHub Repository : https://github.com/g200kg/webaudio-controls
Following user actions are supported.
| Operation | Component | Description |
|---|---|---|
| Click | Switch Other |
Switch : Toggle / activate the switch. Other : Focus the component. |
| Drag | Knob Slider |
Up/Right to increase value Down/Left to decrease value. |
| Shift+Drag | Knob Slider |
Fine control. Increase or decrease by the value specified in the step. |
| Ctrl+Click Command+Click(Mac) |
Knob Slider Switch |
Set to default value. |
| Keyboard | Knob Slider Param Keyboard |
To manipulate with the keyboard, it is necessary to get the focus by clicking each component once. Knob/Slider : ArrowUp/ArrowDown to increase or decrease by the value specified in the step.Param : Edit the param value directly. Keyboard : [ZSXDCV...for lowest visible 'C' octave] and [Q2W3E... one octave higher] as a music keyboard. |
| MouseWheel | Knob Slider |
Rotate upward to increase value, downward to decrease value. |
| Shift+MouseWheel | Knob Slider |
Fine control. Increase or decrease by the value specified in the step. |
| Mouse Button Press Touch |
Keyboard | Play keyboard. multi-touch is supported. |
| R-Click | Knob Slider Switch |
Open MIDI learn menu. |
webaudio-controls is based on:
- WebAudio-Knob by Eiji Kitamura
- WebAudio-Slider by Ryoya Kawai
- WebAudio-Switch by Keisuke Ai
- Integrated and enhanced by g200kg
Copyright (c) 2013 Eiji Kitamura / Ryoya KAWAI / Keisuke Ai / g200kg / @micbuffa / @CellouBalde Licensed under the Apache License, Version 2.0
Knob/Switch images are from Knob Gallery
switch_toggle.knob by az Copyright (c) 2011 CC-BY
<script> webAudioControlsMidiManager.addMidiListener(function(event) { var data = event.data; var channel = data[0] & 0xf; var controlNumber = data[1]; console.log("Midi event hook: data:[" + data + "] channel:" + channel + " cc:"+controlNumber); }); </script>