playground for learning node streams with audio and virtual dom
npm install
npm start
reading the source of any module is the best way to understand what it is doing. let's check out the source code of our playground. :)
mississippi is a grab bag of utility modules for writing better code using streams. so far, we're using miss.pipe provided by pump for constructing pipelines of streams, as by default .pipe will not propagate streams closing or throwing errors. other available utilities include: each, pipeline, duplex, through, from, to, concat, and finished. :)
read-audio is a readable stream which produces n-dimensional arrays of audio, or ndsamples.
vdom-render-stream is a writable stream which consumes data to be rendered via virtual dom element creation, diff computation, and patch operations.
here are some ideas for how one might play with this code.
- brighten or darken the background color based on the overall volume of the audio
- read keyboard input and display in random positions on the page
- allow user to switch between visualization modes
- create a fun VU meter that goes up and down with the volume (bonus points for being smooth by normalizing the values)
update our render function to do something cooler, like display rainbows and unicorns! :3
we could add some transform streams in-between our readable and writable streams.
for example:
- ndsamples-frequencies: do frequency analysis on audio samples
require('ndsamples-frequencies/stream')returns a transform stream- this module is pulled from @substack's
frequency-viewerfor use in http://studio.substack.net, see his code for how he visualizes the result.
- node-audio-rms: root mean square analysis (almost like volume) on a audio samples
require('node-audio-rms')returns a transform stream- use this for the VU meter idea
if you want to pass multiple values through the streams, maybe both raw and processed audio, just return multiple objects nested within a larger object into the callback.
we could read from other sources of data, such as:
quay: produces key press eventsrainbow-pixels@3.0.0: produces{ h, s, l }ndpixelssimple-get: do http requests using the underlying node streams