The wavesvg from samccone

wavesvg's Introduction

wave svg

wavesvg

  new waveSvg({
    buffer: Audiobuffer,
    maxHeight: 300,
    width: 1300, //<default window.innerWidth>
    pixelsPerSecond: 200, //<default window.innerWidth>
    appendTo: dom node, //<default document.body>
    max: 0.2 //<defaults to the tallest audio peak>
    workerPath: "path to worker" //<defaults to peak-worker.js>
    downSample: 16 // <defaults to 16> -- higher num for faster render
  });

interface

  instance.updatePixelsPerSecond(n);
  instance.updateMaxScalar(n);
  instance.updateDownSampleRate(n);

streamsvg

  navigator.webkitGetUserMedia({audio: true}, function(d) {
    new streamSvg({
      maxHeight: 300,
      pixelsPerSecond: 200,
      stream: d,
      max: 2
    });
  });

interface

  // you can also not pass a stream and just call
  instance.onstream(buffer);

To Dev

  cake watch

To Build From Source

  cake build

wavesvg's People

Contributors

Stargazers

Watchers

wavesvg's Issues

Use Web Workers

I don't think stream-svg needs this (and it could possibly cause race conditions, i guess) - but wave-svg should probably be tweaked so that getPeaks happens in a Web Worker. That function is kind of expensive, and it'll lock up the UI - especially if you're processing multiple buffers simultaneously.

So with a worker, the flow would be like...

constructor();
webWorker.postMessage({buffer: buffer, width: width});
webWorker.onmessage = function( peaks ){
draw(peaks);
};

Recommend Projects