web-audio-ui

web-audio-ui

ostensibly this package is intended to render extremely simple UI elements for controlling web audio nodes, however it can be configured to generate range inputs and select dropdowns that are bound to any sort of object, perhaps to control the settings of a generative art piece, or a data visualization, or an "indie game".

if passed an audioNode*, it will automatically generate a UI element based on a default config, however you can customize that by passing a config object in order to change behavior or support handling custom web audio objects (or any object for that matter)

DEMO

* CURRENTLY SUPPORTED audioNodes !:

• Gain
• Oscillator
• Delay
• BiquadFilter
• AudioBufferSource
• WaveShaper (uses this distortion curve as a default)
• StereoPanner
• DynamicsCompressor

TODO:

• add analyserNode (and basic oscilliscope config from https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode ?)
• add pannerNoder/audioListener (SO MANY ATTRIBUTES ZOMG)
• use setValueAtTime in the default configs
• start folder for default configs for web-audio modules on npm
• make range inputs editable by typing in a number

INSTALL

npm install web-audio-ui

SIMPLE USE

var ui = require('web-audio-ui')

var context = new (window.AudioContext || window.webkitAudioContext)()
var osc = context.createOscillator()

var el = ui(osc)
// WOW! el is an html element with inputs bound to the parameters of the audio node! 

document.body.appendChild(el)
osc.start()
// now you have a lovely tone ringing in yr ears! play with the sliders to make it lovelier!-->

ADVANCED USE

var ui = require('web-audio-ui')

// any sort of object can be bound to web-audio-ui, for example: a custom web audio module, a processing sketch, a bunch of jquery spaghetti
var node = {
  type: 'cool',
  time: 3,
}

// we can pass a configuration object to tell web-audio-ui what to do with an arbitrary object
var el = ui(node, {
  className: "wow", // CSS class name to use for the element
  label: "Wow", // label text
  attributes: [
    {
      attribute: "time", // attribute name, used for CSS classes
      type: "range", // input type, can be `range` or `select`
      label: "Time", // UI label text
      min: 0, // min value for the range
      max: 1000, // max value for the range
      step: "any", // increments that the range can be changed by, can be "any" or a number
      value: node.time, // initial value
      update: function (val) { // function to run when input is changed
        node.time = val
        console.log(node)
      }
    },
    {
      attribute: "type", // attribute name, used for CSS classes
      type: "select", // input type, can be `range` or `select`
      label: "Type", // UI label text
      opts: ["cool", "cooler", "coolest"], // options for the select
      value: node.type, // initial value
      update: function (val) { // function to run when input is changed
        node.type = val
        console.log(node)
      }
    }
  ]
})
// WOW! el is an html element with inputs bound to the parameters of the arbitary object thing! 

document.body.appendChild(el)
// now you can update whatever you want! -->

STYLE IT

the demo main.css shows off many of the classes you can target with yr styles.

DEV

# install dependencies

npm install

## to play with the nodes:
# start watchify and local server

npm run watch
python -m SimpleHTTPServer

## to run the tests
# start watchify to build the test files 

npm run test

# => open browser to localhost:8000/test.html and inspect the console
# => it would be rly great to be able to run these tests via a CLI, but...this seems easier...