--- Events ---

WebAudio-Controls Test Page改


<webaudio-knob id="knob1"></webaudio-knob>
Default webaudio-knob. If no knob-image is specified, simple embedded image resource is used.

<webaudio-knob id="knob2" src="img/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="img/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="img/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-slider id="slider1"></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-switch id="toggle1"></webaudio-switch>
Default webaudio-switch. If no switch-image is specified, simple embedded image resource is used.

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

<webaudio-switch id="kick1" src="img/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="img/switch_toggle.png" type="radio" group="radio1" width="54" height="54" value="1" tooltip="Radio-A"></webaudio-switch>
<webaudio-switch id="radioB" src="img/switch_toggle.png" type="radio" group="radio1" width="54" height="54" tooltip="Radio-B"></webaudio-switch&bt;
<webaudio-switch id="radioC" src="img/switch_toggle.png" type="radio" group="radio1" width="54" height="54" tooltip="Radio-C"></webaudio-switch>
Radio type switch. In this mode, only one switch is on in the group.


Refer the following page for detail specifications



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

Using Polymer and WebComponents

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