webaudio-controls

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 :

Overview

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 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.

License

webaudio-controls is based on:

Knob/Switch images are from Knob Gallery
switch_toggle.knob by az Copyright (c) 2011 CC-BY