SpotiVerse

• 

  SpotiVerse Logo

• 

  Popularity Score Feature

• 

  Find the Artist Feature

• 

  Stacking blocks that vary based on a song's popularity

• 

  As your score increases, so does gravity (the blocks can fall)

• 

  Example implementation for changing game colors

• 

  Example implementation continued; Shows default message at bottom

Inspiration

I found a data set on Kaggle with the top 50 Spotify tracks for 73 countries (linked on GitHub if interested). A lot of people stick to the same categories of music for pretty much their whole lives, especially in terms of genre and country of origin. Using this data set, I wanted to encourage people to explore trending songs in other countries as well. My project also encourages users to dive into more niche music genres.

What it does

The PLAY section of the website has a block stacking game with a little twist. Players are asked to name a top50 song for a random country, and the size of the block increases proportionally as the song's popularity decreases. This means users have a better chance of playing the game well if they are familiar with less mainstream music.

The REFERENCE page allows users to look at the data for the songs in the data set. This is especially nice if they learn about a song while playing the game, and want to know more about the song's popularity score and artist.

How we built it

I used HTML/CSS/JavaScript to make the website on GitHub pages. For the data, it was originally in a csv file that I parsed through using Python to convert into a json format. For the game, I used p5.play (a JavaScript based open source language).

Challenges we ran into + What we learned

I originally wanted to use the SpotifyAPI because I knew it'd be easier to filter through songs by country and I wouldn't have to parse a csv file. However, Spotify's API has changed a lot in the past year and I wasted 7 hours trying to figure out how to get authorization (spoiler: I didn't). Then, I wasted an hour trying to find a different music API that can do similar things (spoiler: I also didn't find anything). This was my second time using JavaScript on a larger scale like this, so I was running into errors that were purely based on Syntax or placement of functions. It was also my first time working with p5.play, and I kept accidentally calling features from p5.js instead. I also had to learn how to parse through a csv file, learn what a json file was, learn how to write a json file, and learn how to use a json file in JavaScript.

Accomplishments that we're proud of

I can now use p5.play and json files. I also added color customization to my game on the site.

What's next for SpotiVerse

I would fix the settings page to allow the whole site to be customizeable instead of just the game. I didn't have time to fix syntax for whole site.

Hopefully I can figure out how to use the SpotifyAPI so that the songs on the site aren't limited to the past week-ish. I originally wanted to use Spotify's playlist creation features on this website using their API, so that I could produce playlists based on certain countries to increase diversity in music exposure, so that's something else I'd like to implement as well. Another thing I wanted to add initially was a part of the site where the user would upload a Spotify playlist and the site would return statistics regarding how diverse their music taste was.

Implemented from the What's Next Section:

The dataset had initials for all the countries, so I added a dictionary of key:value pairs so that the country is more clear to the player.

Built With

• css
• html
• javascript
• json
• p5.play
• python