search instagram arrow-down
Sebastian Scholl

Know when I post.

Join 2,410 other followers

Sebastian Scholl

Personal Links

Verified Services

View Full Profile →

For the past week, a friend (Holly Peck) and I have spent our leisure time building a virtual reality music player. This is the first demo we have to show – please feel free to give feedback as well as contribute to the code’s repository!

The project uses A-Frame. You’ll notice that the video is split-screen. This is because it was a screen capture on my Galaxy S6 when being held in a Google Cardboard type headset. When wearing the headset, your eyes naturally merge both images and simple glass lenses correct for some of the distortion. The screen’s center point follows your heads movement, meaning that the screens cursor follows ones direct line of vision.

Using Spotify’s API, we make an AJAX call to get the album images and mp3 track previews. This all comes back as JSON data that we’re able to iterate over using JQuery or Javascript, format into A-Frame entities, and append to the DOM. Positioning is dynamic depending on how many tracks are being returned, meaning that tracks will always face and be evenly distributed in a circle around the user.

Playing and pausing tracks are initiated by .mouseenter() and .mouseleave() events, which can best be compared to a hover event. A very cool part of A-Frame’s sound attribute is that it is spatially aware and emanates sounds from the entities themselves which hold them. Therefore, volume con be “controlled” in two ways. The first way is of course by using ones volume controls, and the second is by the distance between you and an object within a scene.

Lastly, the scene itself was created simply by using A-Frame’s <a-sky>, <a-plane>, and <a-sphere> elements. Together, with added textures and spacial properties, they made up the moon, sky and ground. When wearing a headset we don’t have controls to navigate a scene. However, on a desktop we’re able to use WASD controls to navigate a scene much like a video game.

One comment on “Virtual Reality Music Player: Visualizing Spotify’s API

Leave a Reply
Your email address will not be published. Required fields are marked *

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: