Assignment – Data Material MPM 505

This project was completed by Dylan Didiano(Section 1) and Andrew Imecs(Section 2)


Link to our javascript-based web app:
(The song that will play on our web app using the link ab0ve was chosen by us to show a good example of how our visualization works with the sound)
*Note: Some Soundcloud links will not play in our app due to copyright options set by the original uploaders, we could not find a way around this nor do we want to to avoid any legal repercussions.

Artist Statement:

Music is an interesting thing to play around with. You can perform so many functions with music and create conceptual art. The possibilities are endless in the music realm. So we decided to use music to its full potential, and give the viewer or user a full on music experience taking full measures of data and converting it into an interactive yet vibrant art piece. The main idea for our concept was to utilize the Soundcloud API so that users can grab music from their servers and display and play with and interesting and interactive graphics. By taking high and low frequencies of any soundcloud song and incorporating it into our api we were able to create a visually stunning piece of art. This is api also eliminates any boundaries for music. The art will react depending on the musical genre you decide to use. This is very user friendly and simply involves the user to only have to copy and paste a soundcloud url of their choice. Once that is done the play button needs to be pressed and the soundcloud api will do the rest. By taking live data from online music we were able to create an interesting web application that turns any kind of music into an interactive graphic. The possibilities are endless and music can be displayed in many shapes and sizes and this was our premise with the Soundcloud API.

Technical Description:

Utilizing the Soundcloud API, we have created a javascript-based web application that is essentially a music visualizer. It grabs the sound files from the Soundcloud database and inputs them into our app. The audio data from Soundcloud is processed by the “SoundCloudAudioSource” object, which gives access to two separate properties, “volume” and “streamData”, which are continually updated in real-time by Soundcloud. “streamData” is a selection of 128 integers from 0-255. Each integer represents the volume of the signal at each frequency. “volume” is a single integer standing for the general volume, useful for creating things like pulsing wave effects that reflect the beat or bass of the Soundcloud-hosted track. Using this data along with our basic javascript knowledge, we have created responsive shapes in the sketch that react to the grabbed values from the track that is loaded form Soundcloud. In real-time, these shapes are adjusting their values in size, placement, shape and colour based on the constantly changing values in the audio track. One major difficulty we had was trying to code the visualizer to work with different genres of music. Our visualizer works best with bass-heavy electronic music, if we played a classical track in the web app it wouldn’t effect the visualization as much. If there was a way to recognize the BPM of the track we could write multiple “if” statements to run different variations of integers so that the visualizer would adjust the values for that specific track.


Dylan’s Individual Contribution:

After discovering what we wanted to achieve with our Data Materiality assignment, we decided that using processing was going to put a huge roadblock to our project. Andrew discovered the Soundcloud API that worked with javascript, which was perfect because I knew how to code basic javascript as I am a part-time web developer.  Using my basic knowledge of javascript, css, and html I was able to code a web application that used the Soundcloud API that Andrew had found to create an interesting audio track visualization. Our Soundcloud API Experiment is created like a website in the sense that I needed to build the back-end HTML and CSS pages first and then build the Javascript code on top of that. I uploaded the web app to my own VPS hosting server, the same server that I host all my websites and web properties. The only problem I we ran into when coding was compatibility issues with javascript. Due to this reason our web app will only work on Google Chrome.

Andrew’s Individual Contribution:

In my desperate attempt to find an appropriate api for this art I came across a bunch of obstacles and setbacks. Not many API’s were compatible with music and was not live what so ever. Also use interface was primitive and not sufficient enough to create the art. Eventually I found a Soundcloud API that was well suitable for this data materiality project. I took the Soundcloud API and implemented it into the JavaScript code. This was an excellent starting point and then eventually graphics needed to be made. So what I did was design the graphical content needed for the Soundcloud api. First I needed to create the background and the art that interacted with the music. Then I needed to create the buttons that would help make the api user friendly. Once this was all done the JavaScript code needed to be made and the api would be a huge success. My partner made the code and he designed the code so that it would work with all our graphics. I designed the background and buttons with certain parameters so nothing goes wrong. By keeping everything simple within the user interface and creating complex graphics the piece instantly became very user friendly. The api was working successfully and everything came together to make the perfect live music api for the internet.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s