Final – Mash Up APIs

The Web is Here

Overview

For this mash-up final project, I decided to keep working on the “hip-hop artist and their works” theme and my chosen target is one of my favorite Chinese hip-hop groups named higher brothers.

My goal is to both practice what I have learned in this class (using HTML, CSS, calling APIs using Jquery, SVG images, JSON files, etc..) and to also present a visually interesting preview of the songs.

ToolKits

Spotify API, JSON files, SVG, CSS Animation, JQuery, JavaScript, HTML

Since I was able to successfully use Spotify APIs to get the preview of songs, I decided to keep using it. My biggest challenge was to get the lyrics of the songs.

After asking around, I got two solutions:

  1. Use python to scrap lyrics from websites like Genius;
  2. Use some lyrics APIs

for solution 1, I was not able to figure out python in this amount of time;  and for solution 2, the best API I found, which is MusixMatch only provides with 30 percent of the lyrics.

Neither of these seems to be the best match for my need so I came up with a third solution, which is to build my own lyrics JSON file.

Therefore I limited my target to just one EP of the hip-hop group Higher Brothers, which only contains four songs. I use a pretty useful tool to called JSONlint to validate the JSON I write and I am able to use my own API.

I create two cassette SVGs and use that as a play trigger on the website. I looked up a bunch of references to animate them and the texts. Every time the user clicks the cassette, the cassettes flips to the back side of it.

I also add header with the social media accounts of the group members linked.

As an outcome for now, I built this website to introduce EP “type-3” of higher brothers. When you click the cassette, it will play you a random song from the EP with lyrics.

Future Development

I want to learn python scraping so I will be able to get as many lyrics as I want. I also want to includes the artists’ bio into the website.

 

References:

https://www.youtube.com/watch?v=_oYQYQHc06A

https://www.youtube.com/watch?v=avTM4LEkkqU

https://codepen.io/demianpt/pen/qbLaQZ

https://stackoverflow.com/questions/40179959/trigger-same-css-animation-on-every-click?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

 

 

Leave a Reply

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 )

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