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 :


WebAudioControlsOptions

By setting the global object, WebAudioControlsOptions, you can specify default values such as the knob size or colors etc when attribute setting on each tag is omitted. This declaration should be prior to the webaduio-controls.js loading.

<script>
WebAudioControlsOptions={
  useMidi:1,
  knobDiameter:80,
  switchWidth:40,
  switchHeight:20,
};
</script>
<script src="webaudio-controls.js"></script>

The items that can be set are as follows

name default description
useMidi 0 If 1, enable control from midi devices.
midilearn 0 If 1, enable midilearn function for each knobs/sliders/switches.
preserveMidiLearn 0 If 1, save the MIDI learn result in localStorage and maintain when the next access.
outline 0 Outline style when focused. Specify detail like "1px solid #ff8888" or "1" for default "1px solid #ccc" style.
valuetip 0 valuetip display
knobWidth null width for knobs
knobHeight null height for knobs
knobDiameter 64 diameter for knobs
knobSrc null knob image source
knobSprites null knob image number of frames
knobColors "#e00;#000;#fff" color setting for knobs
sliderWidth 24 width for sliders
sliderHeight 128 height for sliders
sliderSrc null background image of sliders
sliderKnobWidth 0 width of the slider thumb
sliderKnobHeight 0 height of the slider thumb
sliderKnobSrc null image of the slider thumb
sliderColors "#e00;#333;#fcc" color setting for sliders
switchWidth 0 width for switches
switchHeight 0 height for switches
switchDiameter 24 diameter for switches
switchColors "#e00;#000;#fcc" color setting for switches
paramWidth 32 width for param
paramHeight 20 height for param
paramSrc null param background image source
paramColors "#fff;#000" color setting for param