Skip to content

kea-2016/stream-playground

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

stream-playground

playground for learning node streams with audio and virtual dom

get started

npm install
npm start

read the source

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.

play with code

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)

write better visuals

update our render function to do something cooler, like display rainbows and unicorns! :3

transform audio

we could add some transform streams in-between our readable and writable streams.

for example:

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.

read fresh data

we could read from other sources of data, such as:

see also

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 76.9%
  • HTML 18.6%
  • CSS 4.5%