Graphical User Interfaces and Digital Audio
A small single file library of audio oriented widgets for use in web views.
- ECMAScript 2015 (ES6)
- Leverages Web Components standard
- Touch-first but also mouse friendly
- SVG graphics with CSS styling
- Event driven
- Minimalistic design
- Knob
- Fader
- Button
- Resize handle
Live demo here
Pure HTML:
<body>
<g-knob
min="0"
max="1"
oninput="console.log(`The new knob value is ${this.value}`)">
<g-knob>
<script src="guinda.js"></script>
</body>Programmatically:
const knob = document.createElement('g-knob');
knob.props.min = 0;
knob.props.max = 1;
knob.addEventListener('input', (ev) => {
console.log(`The new knob value is ${ev.target.value}`);
});
document.body.appendChild(knob);Properties can be passed at instantiation time using the new operator:
const knob = new Knob({min: 0, max: 1});Properties can be also updated any time after instantiation:
const knob = new Knob();
knob.props.min = 0;
knob.setAttribute('max', 1.0);