DailyJS

New npm Site, Amelie Music Visualiser

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

audio npm

New npm Site, Amelie Music Visualiser

Posted by Alex R. Young on .
Featured

audio npm

New npm Site, Amelie Music Visualiser

Posted by Alex R. Young on .

New npm Site

npm

npm has a new website! There's an announcement blog post that explains what has changed, and what's next, including this information about private modules:

Our next immediate goal is to support private npm modules on the website. This will allow individuals and teams to publish, install, and view private code using all the familiar npm mechanisms.

The website is now responsive, so it'll look better on mobile devices. I found it looked nicer when I tiled my browser windows, which I often like to do when juggling material for DailyJS posts.

Amelie Music Visualiser

Amelie

Adam Timberlake sent in a music visualisation experiment made with React, D3, and SVG: amelie.herokuapp.com (GitHub: Wildhoney/Amelie, Bower: amelie). It uses AnalyserNode to get frequency data from the audio file:

The AnalyserNode interface represents a node able to provide real-time frequency and time-domain analysis information. It is an AudioNode that passes the audio stream unchanged from the input to the output, but allows you to take the generated data, process it, and create audio visualizations.

Because the AnalyserNode API does the more complicated FFT stuff, the source is actually fairly easy to understand. Take a look at Amelie.jsx to see how the colours are generated and then plotted using D3.js.