WebAudioControls is GUI parts library for Web application using [Polymer] WebComponents.
Especially suitable for audio-applications like VST plugins.
Polymer 1.4 compatible
WebAudioControls is consist of following components
| Component | Description |
|---|---|
| webaudio-knob | Rotating or some other frame-by-frame animation knob |
| webaudio-slider | Vertical or Horizontal slider |
| webaudio-switch | Toggle/Kick/Radio switches |
| webaudio-param | Editable value display field |
| webaudio-keyboard | Mouse/Touch playable keyboard. multi-touch support. |
Chrome / Firefox / Safari / Opera / IE compatible
iOS and Android touch devices compatible
Live Demo sample1 (with external image-files)
Live Demo sample2 (with code example)
Live Demo sample3 (Knob/Slider/Switch/Param/Keyboard default style)
Live Demo sample4 (webaudio-keyboard to webMIDIAPI)
(need Mac+ChromeCanary+flagEnabled+MIDIdevice or Win+JazzPlugin or Mac+JazzPlugin+MidiDevice)
Renoid : Practical application using webaudio-controls
Using with external image-files.
Default style with no external image-files.
Following user actions are supported.
| Operation | Component | Description |
|---|---|---|
| Click | Switch/Param | toggle / activate the switch or focus the param |
| Drag | Knob/Slider | up/right to increase value / down/left to decrease value |
| Shift+Drag | Knob/Slider | fine control |
| Ctrl+Click / Command+Click(Mac) | Knob/Slider/Switch | set to default value |
| Edit with Keyboard | Param | edit the value directly |
| MouseWheel | Knob/Slider | rotate upward to increase value / downward to decrease value |
| Shift+MouseWheel | Knob/Slider | fine control |
| Mouse Button Press / Touch | Keyboard | play keyboard. multi-touch is supported |
- Install Polymer & webaudio-controls -- Use bower
$ bower install --save webaudio-controlsOr download zipped files.
To use webaudio-controls, these three components must be downloaded and be deployed appropriately.
Polymer: Polymer/polymer
webcomponentsjs: Polymer/webcomponentsjs
webaudio-controls: WebMusicDevelopersJP/webaudio-controls
- load webcomponents.js and polymer
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script><br/>
<link rel="import" href="bower_components/polymer/polymer.html">- load webaudio-contols
<link rel="import" href="bower_components/webaudio-controls/webaudio-controls.html">- insert
webaudio-knob/slider/switch/param/keyboardelement
<webaudio-knob src="img/LittlePhatty.png" sprites="100" min="0" max="100"></webaudio-knob>
<webaudio-slider src="img/hsliderbody.png"></webaudio-slider>
<webaudio-switch src="img/switch_toggle.png" width="32" height="32"></webaudio-switch>
<webaudio-param src="" link="knob-1"></webaudio-param>
<webaudio-keyboard keys="25"></webaudio-keyboard> | Attribute | Options | Default | Description |
|---|---|---|---|
| src | string | Internal embedded resource is used if not specified | url of the knob image. (single frame or vertical stitched) |
| value | float | 0 |
The current value. Also used as initial value if specified |
| defvalue | float | Initial 'value' is used if not specified | The default value that will be used when ctrl+click |
| min | float | 0 |
Minimum value of the knob |
| max | float | 100 |
Maximum value of the knob |
| step | float | 1 |
Value step of the control. The 'value' is always rounded to multiple of 'step' |
| log | int | 0 |
If 1, knob scale is logalithmic. In this mode, step is ignored. |
| units | string | null |
specified units (e.g. Hz) is added to valuetip |
| width | int | 64 |
Knob display width in px |
| height | int | 64 |
Knob display height in px |
| diameter | int | 64 |
Knob display diameter in px. This attribute can be used instead of width / height if the display image is square |
| sprites | int | 0 |
if 0, the src image should be single frame image that indicate middle position. the image will be rotated -135deg to +135deg. if sprirites is not 0, the src image should be stitched multi-framed image. sprites specify the max frame number in the stitched knob image. Note that this is (number of frames) - 1 |
| sensitivity | float | 1 |
Pointing device sensitivity. min-max range correspond to (128 / sensitivity) px |
| valuetip | 0,1 |
1 |
Enable the overlaid value-tip display. |
| tooltip | string | null |
Tooltip text that will be shown when mouse hover a while |
| enable | 0,1 |
1 |
Enable control with the pointing device. |
| colors | string | "#e00;#000;#000" | Semicolon separated 3 colors for 'indicator', 'body' and 'highlight'. These colors are used in default knob (when src is not provided). |
| Attribute | Options | Default | Description |
|---|---|---|---|
| src | string | Internal embedded resource is used if not specified | url of the slider background image |
| knobsrc | string | Internal embedded resouce is used if not specified | url of the slider knob part image |
| value | float | 0 |
The current value. Also used as initial value if specified |
| defvalue | float | Initial 'value' is used if not specified | The default value that will be used when ctrl+click |
| min | float | 0 |
Minimum value of the slider |
| max | float | 100 |
Maximum value of the slider |
| step | float | 1 |
Value step of the control. The 'value' is always rounded to multiple of 'step' |
| width | int | 24 |
Slider display width in px |
| height | int | 128 |
Slider display height in px |
| knobwidth | int | same as 'width' if 'direction' is vert, or same as 'height' if 'direction' is horz |
Slider knob part width in px |
| knobheight | int | same as 'width' if 'direction' is vert, or same as 'height' if 'direction' is horz |
Slider knob part height in px |
| ditchlength | int | ('height'-'knobheight') or ('width'-'knobwidth') depends on 'direction' | Knob movable length |
| direction | "vert","horz" |
"vert" |
Slider direction. vertical or horizontal |
| sensitivity | float | 1 |
Pointing device sensitivity. min-max range correspond to (128 / 'sensitivity') px |
| valuetip | 0,1 |
1 |
Enable the overlaid value-tip display. |
| tooltip | string | null |
Tooltip text that will be shown when mouse hover a while |
| enable | 0, 1 |
1 |
Enable control with the pointing device. |
| colors | string | "#e00;#000;#fff" | Semicolon separated 3 colors for 'knob', 'background' and 'highlight'. These colors are used in default knob (when src or knobsrc is not provided). |
| Attribute | Options | Default | Description |
|---|---|---|---|
| src | string | Internal embedded resource is used if not specified | url of the vertical stitched switch image |
| value | 0,1 |
0 |
The current value (0 or 1). Also used as initial value of the switch if specified |
| defvalue | 0,1 |
Initial 'value' is used if not specified | The default value that will be used when ctrl+click |
| width | int | 32 |
Switch display width in px |
| height | int | 32 |
Switch display height in px |
| type | "toggle","kick","radio" |
"toggle" |
Switch type. "toggle" switch has so-called 'checkbox' function. "radio" switch is a radio-button and the "kick" switch is a general command button |
| group | string | null |
Group id string used if the 'type' is "radio". Only one switch will be set to "1" in same group |
| invert | 0,1 |
0 |
exchange on and off image |
| tooltip | string | null |
Tooltip text that will be shown when mouse hover a while |
| enable | 0,1 |
1 |
Enable control with the pointing device. |
| colors | string | "#e00;#000;#fff" | Semicolon separated 3 colors for 'knob', 'background' and 'highlight'. These colors are used in default switch (when src is not provided). |
| Attribute | Options | Default | Description |
|---|---|---|---|
| src | string | Black rectangle if not specified | Background image or color. Transparent if set to "", or url to background image. |
| value | float | 0 |
The current value. Usually same as linked control |
| width | int | 32 |
Parameter display width in px |
| height | int | 16 |
Parameter display height in px |
| fontsize | int | 9 |
Font-size of the parameter display |
| colors | string | "#e00;#000" |
Semicolon separated 2 colors for text and background. background color is used when src is not defined. |
| link | string | null |
Specify the linked webaudio-knob/slider/switch by Id |
| Attribute | Options | Default | Description |
|---|---|---|---|
| values | int array | [] |
The array of current pressed key numbers. "values" may has more than one element in multi-touch environment. |
| width | int | 480 |
Keyboard display width in px |
| height | int | 128 |
Keyboard display height in px |
| min | int | 0 |
Lowest Key number. Each key is numbered incrementally from this number. If the "min" is not 0 and the modulo 12 is not zero, the keyboard is started from corresponding position (not-C). Note that the specified key should be a 'white-key'. |
| keys | int | 25 |
Number of keys. 25 means 25 keys keyboard. |
| colors | string | '#222; #eee;#ccc; #333;#000; #e88;#c44; #c33;#800' | semicolon separated 9 keyboard colors. 'border; whitekey-grad-from;whitekey-grad-to; blackkey-grad-from;blackkey-grad-to; active-whitekey-grad-from;active-whitekey-grad-to; active-blackkey-grad-from;active-blackkey-grad-to'. Each key surface can has garadient left to right with 'from' and 'to'. |
| enable | 0,1 |
1 |
Enable control with the pointing device. |
webaudio-knob | webaudio-slider | webaudio-switch
description: Each control can be setup and redraw by calling this function from JavaScript.
If the fire parameter is undefined or false, this function will not fire 'change' event. Or the change event will be fired.
webaudio-keyboard
description: webaudio-keyboard can be setup pressing state with this function from JavaScript. corresponding key specified by the note is pressed if the state is non-zero otherwise the key is released. This function will NOT fire the 'change' event.
webaudio-knob | webaudio-slider | webaudio-switch | webaudio-keyboard
description: 'change' event is emitted everytime value changes by user action or setValue() function with fire flag is true. In the event handler of webaudio-knob,webaudio-slider or webaudio-switch, current value can be get with referring event.target.value.
var knobs = document.getElementsByTagName('webaudio-knob');
for (var i = 0; i < knobs.length; i++) {
var knob = knobs[i];
knob.addEventListener('change', function(e) {
// knob.addEventListener('change', (e) => { /* in ES6 */
console.log(e.target.value);
});
}For the webaudio-keyboard, each 'change' event has the property '.note' that contain a array [key-state, key-number]. For example event.note = [1, 60] if the key#60 is on, or event.note = [0, 60] if the key#60 is off.
var keyboard = document.getElementsById('keyboard');
keyboard.addEventListener('change', function(e) {
// keyboard.addEventListener('change', (e) => { /* in ES6 */
if(e.note[0])
console.log("Note-On:"+e.note[1]);
else
console.log("Note-Off:"+e.note[1]);
});Note: The addEventListener() function is recommended for event handler setup instead of 'onchange=' attribute. 'onchange=' attribute seems not work on Safari.
webaudio-switch (kick)
description: 'click' event is emitted if the 'kick' type webaudio-switch has clicked.
webaudio-knob (with sprites is 0 (default)) use a single frame knob image that indicate center position.
For example,
This image will be rotated from -135deg to +135deg. This approach will works well if the image is flat designed, but more complex animation (for example, drop-shadowed, highlighted or something elastic) will need pre-rendered frame-by-frame animation as below.
webaudio-knob (with non zero "sprites") use a vertical 'stitched' multi-frames animation image, and webaudio-switch use a vertical 'stitched' two-frames animation image.
For example,
This knob example has only 5 frames but it should has more frames for smooth animation. I recommend to use JKnobMan/WebKnobMan for making these stitched images,
- JKnobMan -- Java based Knob image creation tool.
- WebKnobMan -- WebApp version of the JknobMan
- KnobGallery -- knob data sharing space
Here is a brief instruction to export knob-image from KnobGallery
- Go to KnobGallery
- Find your favorite knob design and click 'Open with WebKnobMan'
- Click on 'Export' to download
pngfile - Of course, you can create your own!
Note: comply with license requirements
WebAudio-Controls is developped 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)
Licensed under the Apache License, Version 2.0
Knob/Switch images in samples are from Knob Gallery
switch_toggle.knob by az (c) 2011 CC-BY