webaudio-controls

GUI parts library for Web application using WebComponents

---

Project maintained by g200kg Hosted on GitHub Pages — Theme by mattgraham

Basic Usage :

• Overview
• Install
• How it works
• Detail&Specs
• WebAudioControlsOptions
• Creating Knob Images
• Default Styles
• Attributes Examples

Advanced Usage and Application Notes :

• Knob Samples from KnobGallery
• Working Keyboard Demo
• Determining Knob Size
• Slider tracking "rel" and "abs"
• Non-Linear Knobs / Sliders
• Multi-Touch Device Support
• MIDI Support
• Resizing After Creation

---

Install

• webaudio-controls.js
  • Place “webaudio-controls.js” to an appropriate directory.
    This is the only file needed. There are no dependencies on other libraries.

  webaudio-controls.js

• WebComponents polyfill
  • If you want to support legacy browsers that not support WebComponents, the polyfill for WebComponents is needed :
    <script src="../webcomponents-lite.js"></script>
• load webaudio-controls
  • <script src="../webaudio-controls.js"></script>
    Or, if you want to load webaudio-controls.js directly from this GitHub page as CDN :
  • <script src="https://g200kg.github.io/webaudio-controls/webaudio-controls.js"></script>
• insert webaudio-knob / slider / switch / param / keyboard elements.
  • <webaudio-knob id="knob-1" src="../knobs/LittlePhatty.png" min="0" max="100"></webaudio-knob>
  • <webaudio-slider></webaudio-slider>
  • <webaudio-switch src="../knobs/switch_toggle.png" width="32" height="32"></webaudio-switch>
  • <webaudio-param link="knob-1"></webaudio-param>
  • <webaudio-keyboard keys="25"></webaudio-keyboard>

---

---