Add blog post for Audio Vis

_posts/2018-04-09-audio-vis.md

@@ -0,0 +1,61 @@
+---
+layout: post
+title: Audio Vis
+date: 2018-04-09 15:00:00
+categories:
+	- HTML-Canvas
+	- Javascript
+	- NodeJS
+description: Audio Visualizer with Spotify Web API Integration
+image: https://i.imgur.com/XTt9yEa.jpg
+image-sm: 
+author: James DiGrazia
+author-image: https://pbs.twimg.com/profile_images/841068713625423877/z5pHyj_S_400x400.jpg
+author-bio: Second Year Game Design and Development Student at Rochester Institute of Technology
+author-email: jimdaguy@csh.rit.edu
+author-social:
+	github: https://github.com/JimDaGuy
+	linkedin: https://www.linkedin.com/in/jimdaguy/
+---
+
+# Audio Vis
+Audio Vis started as a class project for my Rich Media Web Application Development class. 
+Our assignment was to create an audio visualizer utilizing HTML Canvas and Javascript;
+Before writing any of the code for visualizations or a proper user interface, I 
+decided I wanted to implement the Spotify Web API so that users could sign in
+with Spotify, search for songs, and visualize those songs. Little did I know that
+this process would take 20+ hours. As with most of my projects, learning about the 
+technologies that I'm working with took the most of my time.
+## Learning Process
+### Authentication
+Spotify's Web API is the first API that I have worked with. Prior to this assignment 
+I had no experience with making asynchronous calls, using OAuth, or dynamically
+creating content in response to API calls. To understand Spotify's authorization,
+I used their [Authorization Code Examples](https://github.com/spotify/web-api-auth-examples "Web API Auth Examples")
+and worked backwards through them to understand how to redirect users to an Authentication page,
+grab a temporary API token, and use that API token to make requests. After understanding
+how Spotify's Authentication worked, I reworked the code to work with my application
+and registered a web app on Spotify's Developer Dashboard so I could get the other
+neccesary keys for my app. During this process I also switched from my online IDE
+to hosting a NodeJS server locally. 
+
+### API Requests
+After getting to the point where I could make authenticated API calls, I decided
+to look further into the API. It was at this point that I realized the Spotify
+Web API did not support requests for the entire song even if they were authenticated.
+This is a feature in both the IOS and Andriod API, which I may use in future projects.
+The API did however support requests for song preview links. I added a search bar
+to enter search queries that were parsed to fit the request format and added to 
+the request link before making API calls. I then parsed the results down to five
+songs at most, grabbed their name and artist, and put them into search results 
+that the user could pick to add to their tracklist. Adding a song to the tracklist
+required grabbing their preview url and changing the audio node's src to it.
+
+### Open Shift
+To post all of the code for my project without giving away private keys and to 
+host it publicly I used CSH's deployment of OpenShift. This allowed me to change 
+important keys and secret id's to filler variables such as "SECRET_ID" and Open
+Shift did the rest to replace them. If you are interested in the project it is
+available [here](audiovis.csh.rit.edu) and my project repository can be found
+(and contributed to!) [here](https://github.com/JimDaGuy/audio-vis).
+