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:

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