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.
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:
- Use python to scrap lyrics from websites like Genius;
- 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.
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.