Visual knob element for Web Audio using Polymer
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
index.html update polymer.js w/ some fix Aug 8, 2013

If you are interested in this project, please check webaudio-controls by @g200kg as well. webaudio-controls has a fork of this project + slider, switch and even keyboard. Touch enabled too!

Polymer Knob Example

Live Demo

How to use

  • load polymer.js
  • link to webaudio-knob component
<script src="">
<link rel="import" href="">
  • insert webaudio-knob element
<webaudio-knob src="img/MiniBrute.png" min="-127" max="127" value="0" step="3" diameter="" sprites="100"></webaudio-knob>
  • create imperatively
var knob = document.createElement('webaudio-knob');
  • value can be changed by simply dragging up and down
  • with 'shift' key pressed, value changes by 1 (otherwise per step)



description: min value of the knob
default: 0


description: max value of the knob
default: 127


description: value of the knob
default: 0


description: value change steps by moving mouse
default: 3


description: number of sprites your knob image has
default: 30


description: diameter of single knob
default: 64


description: path to knob image resource (relative from where you are refering)
default: 'img/org_amp.png'



description: 'change' event emitted everytime value changes

var knobs = document.getElementsByTagName('webaudio-knob');
for (var i = 0; i < knobs.length; i++) {
  var knob = knobs[i];
  knob.addEventListener('change', function(e) {

Creating knob images

  • Go to WebKnobMan
  • Find your favorite knob design and click 'Open with WebKnobMan'
  • Click on 'Export' to download png file
  • Of course, you can create your own!

Note: comply with license requirements