diff --git a/_posts/2018-04-09-audio-vis.md b/_posts/2018-04-09-audio-vis.md new file mode 100644 index 0000000..bb310ef --- /dev/null +++ b/_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). +