--- Events ---

WebAudio-Controls Test Page

WebAudio-Knobs


<webaudio-knob id="knob1"></webaudio-knob>
<webaudio-knob id="knob1a" colors="#fc0;#000;#444"></webaudio-knob>
Default webaudio-knob. If no knob-image is specified, simple embedded image resource is used. Colors are customizable.



<webaudio-knob id="knob2" src="../knobs/LittlePhatty.png" sprites="100" value="60" min="-100" max="100" step="20" diameter="64"></webaudio-knob>
Knob image file is assigned. Value range can be specified by min/max. The initial value is "60". The value is changed in step of "20".



<webaudio-knob id="knob3" src="../knobs/LittlePhatty.png" sprites="100" diameter="32"></webaudio-knob>
The knob image will be resized to specified size (even recommended to prepare required size image for clear display)



<webaudio-knob id="knob4" src="img/hsw5.png" sprites="4" value="2" min="0" max="4" width="128" height="32"></webaudio-knob>
non-square image is used with specifying width/height instead of diameter.



<webaudio-knob id="knob5" src="../knobs/LittlePhatty.png" sprites="100" diameter="64" valuetip="0" tooltip="Knob Test"></webaudio-knob>
<webaudio-param link="knob5"></webaudio-param>
webaudio-knob can has tooltip-text and editable parameter display field with webaudio-param



WebAudio-Sliders


<webaudio-slider id="slider1"></webaudio-slider>
<webaudio-slider id="slider1a" colors="#850;#230;#fff"></webaudio-slider>
<webaudio-slider id="slider2" direction="horz"></webaudio-slider>
Default webaudio-slider. If no slider-image is specified, simple embedded image resource is used. The slider direction is specified by "direction" attribute.



<webaudio-slider id="slider3" direction="horz" src="img/hsliderbody.png" knobsrc="img/hsliderknob.png"></webaudi-slider>
Specifying the sliderbase and sliderknob images.



<webaudio-slider id="slider4" direction="horz" src="img/hsliderbody.png" knobsrc="img/hsliderknob.png" min="0" max="1" step="0.1" width="60" height="20" valuetip="0" tooltip="Slider Test"></webaudio-slider>
<webaudio-param link="slider4"></webaudio-param>
Value step is specified, resized, tooltip-text and webaudio-param is added.



WebAudio-Switches


<webaudio-switch id="toggle1"></webaudio-switch>
<webaudio-switch id="toggle1a" colors="#0c0;#008;#fff"></webaudio-switch>
Default webaudio-switch. If no switch-image is specified, simple embedded image resource is used.



<webaudio-switch id="toggle2" src="../knobs/switch_toggle.png" width="32" height="32"></webaudio-switch>
<webaudio-switch id="toggle3" src="../knobs/switch_toggle.png" width="54" height="54"></webaudio-switch>
Image file is specified. Images are resized to specified size.



<webaudio-switch id="kick1" src="../knobs/switch_toggle.png" type="kick" width="54" height="54"></webaudio-switch>
Kick type switch. In this mode, this switch is on only while pressing.



<webaudio-switch id="radioA" src="../knobs/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" value="1" tooltip="Radio-A"></webaudio-switch>
<webaudio-switch id="radioB" src="../knobs/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" tooltip="Radio-B"></webaudio-switch>
<webaudio-switch id="radioC" src="../knobs/switch_toggle.png" type="radio" group="radio1" width="54" height="54" invert="1" tooltip="Radio-C"></webaudio-switch>
Radio type switch. In this mode, only one switch is activated in the group.


Specification

Refer the following page for detail specifications

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

License

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 (Tatsuya Shinyagaito)
webaudio-controls is 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