nativeformat / NFPlayerJS

A JavaScript/TypeScript audio engine for the Web and Server capable of multitrack time stretching, pitch shifting, declarative effects, faster than realtime processing, and more!
https://nativeformat.github.io/NFPlayerJS
Apache License 2.0
130 stars 9 forks source link

[feature][demo] Add Simple Frequency Domain Visualization #18

Closed hydrosquall closed 5 years ago

hydrosquall commented 5 years ago

Summary

This adds a basic example for using the WebAudio AnalyserNode API along with Canvas to visualize real-time audio playback frequency.

Screen Recording 2019-04-13 at 09 06 PM (link)

Made possible by the guidance from @kirbysayshi in this comment in #10, along with this demo: WebAudioAPI

Note on Architecture

I aimed to keep the example as small/contained as possible, but felt that putting the analyser up in App.tsx was necessary since that's where new SmartPlayers are made. However, I could contain the new SmartPlayer to just the WaveVisualizer.tsx instead, and ignore the one that is passed in.

I could have based this component on the Code Editor instead, but went with JSON editor to avoid the risk of someone forgetting to click Eval.

Unrelated Question

Is there a fast way to go from "song term" search to "spotify preview URL"? I swapped out Roxanne during testing using the web api to find some alternative tracks, but was wondering if there was an existing GUI I could use.