Online version of Fraviz available on heroku.

Spotify account login is needed too see the application in action. To see results without this step, you can watch youtube recording.

• Awesome Audio Visualization
• Notes on Music Information Retrieval
• Listenable accoustic map

Project forked from spotify-viz.

• Get Audio Analysis for a Track
• Get Audio Features for a Track
• Get a Track

• three.js
• d3-interpolate

1. Create a new Spotify app in your Spotify Developer Dashboard.
2. Add http://localhost:8001/callback to your app's Redirect URIs. Note your app's Client ID and Client Secret.
3. Create a file named .env in the project's root directory with the following values:

CLIENT_ID=YOUR_CLIENT_ID_HERE
CLIENT_SECRET=YOUR_CLIENT_SECRET_HERE
REDIRECT_URI=http://localhost:8001/callback
PROJECT_ROOT=http://localhost:8001
NODE_ENV=development

4. Install and serve using NPM.

npm i
npm run serve

Links from book: Beginning WebGL for HTML5 pdf (https://www.docdroid.net/kg1s/beginning-webgl-for-html5-pdf#page=7)

https://www.khronos.org/webgl/wiki/Demo_Repository http://madebyevan.com/webgl-water/ http://ibiblio.org/e-notes/webgl/gpu/contents.htm http://www.ro.me/tech/ https://experiments.withgoogle.com/search?q=WebGL

http://learnwebgl.brown37.net

https://www.w3.org/TR/html5-diff/

http://crockford.com/javascript/ https://jquery.com https://www.json.org/json-en.html

https://www.khronos.org/webgl/wiki/User_Contributions

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices

https://www.khronos.org/registry/webgl/specs/latest/

https://learningmusic.ableton.com/index.html

• Three.js Fundamentals
• Three.js 2013
• Random Terrain

• Track Analysis (beats, bars ...)
• Track Features Filter
• Visualize Track Features
• Create Spotify Playlist using Analysis
• More Spotify Applications