Final – Mash Up APIs

The Web is Here


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.


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.