GUI parts library for Web application using WebComponents

Project maintained by g200kg Hosted on GitHub Pages — Theme by mattgraham

Basic Usage :

Advanced Usage and Application Notes :


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.

Source Code is Available At

GitHub Repository : https://github.com/g200kg/webaudio-controls

To Operate

Following user actions are supported.

Operation Component Description
Click Switch
Switch : Toggle / activate the switch.
Other : Focus the component.
Drag Knob
Up/Right to increase value
Down/Left to decrease value.
Shift+Drag Knob
Fine control. Increase or decrease by the value specified in the step.
Set to default value.
Keyboard Knob
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
Rotate upward to increase value, downward to decrease value.
Shift+MouseWheel Knob
Fine control. Increase or decrease by the value specified in the step.
Mouse Button Press
Keyboard Play keyboard. multi-touch is supported.
R-Click Knob
Open MIDI learn menu.


webaudio-controls is based on:

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