Lyrify

This is the Server Side of the Project

Motivation • Key Features • Get The API • How To Install • Tech Dependencies • Next Steps • Credits

Motivation

Music is the language without barriers, in recent years, we are seeing an uptrend in the appeal to the global artist, BTS, a Korean boy band, who achieved international success & exposure and have their music played across radio stations worldwide. Even 'Macarena' was charting as a top dance song among non-native language speakers, back in 1995. Though these are great songs, unless you are native to the language, it is difficult to understand the meaning behind the song's lyrics. In contrast, English songs often generate a strong sense of curiosity among listeners, as they are intended to be understood and appreciated through their lyrics. A few notable examples are SAINt JHN - Roses (Imanbek Remix)

Lyrify offers a comprehensive solution to bridge the gap by displaying the lyrics for every song searched via Spotify. In addition, Lyrify offers translation for non-English songs to facilitate a deeper understanding of the thoughts and emotions conveyed via the music. This innovative platform promises to enhance the listening experience broader audience, promoting greater cultural exchange and appreciation in the global music community.

Key Features

Client Side

Lyrics and Translation for non-english song are displayed simultaneously or seperately based on requirement of the user

Search displays upto 20 results for user to find the right song

Spotify Web Player allows user to connect to devices other than the Web Player, example: Mobile or Google Speaker

---

Server Side

API calls are made only when song search is Unique. If Song is found in JSON, Lyrify displays from the JSON instead of calling API

Translation API is called and only occurs for non-english songs

Spotify Web Player automatically expires after 10 minutes, thereby limiting potential API calls

---

A Valid Spotify Premium Account is Required

Google Cloud Key Will Require You To Link Your Credit Card

Your Credit Card however may not be charged

---

Get The API

Spotify

To get started, set up a Spotify APP

Application Name: Lyrify
Please note the Client ID and the Client Secret
Under Edit Settings go to Redirect URIs and add http://localhost:3000/lyrify
Save

Further explanation for Spotify Dashboard is provided here Spotify Dashboard

Google Cloud Translate

To get started, go to link Google Cloud

Click on New Project
Next click the ☰ and go to API & Services then Enabled API & Services
Search for Cloud Translation and select Enable
Enable Billing and select your billing account
Go to IAM & Admin and then to Service Account
Create a Service Account
Under Grant this service account access to project – Role
Choose Cloud Translation API Admin and then click Done
Click the ⋮ then Manage Keys
Select ADD KEY then Create new key
Keep default JSON selected and Create

The above steps will generate a Google Cloud Translation API Key

Further explanantion for Google Cloud Translation API is provided here Google Cloud Translation Doc

How To Install

To clone and run the program on the Server Side. You will require Git and Node.js
After which, please follow the instructions below:

Open an IDE program, preferable VS Code.
Under Terminal in VS Code select New Terminal

# Clone this repository
$ git clone https://github.com/azmanosis/lyrify-capstone-api.git
# Go into the folder
$ cd lyrify-capstone-api
# Install dependencies
$ npm install

Set up a .env file inside lyrify-capstone-api folder.
Add REDIRECT_URI REDIRECT_URI=http://localhost:3000/lyrify If running locally.
Add CLIENT_ID and CLIENT_SECRET from your Spotify Account
Add the GOOGLE_APPLICATION_CREDENTIALS
Add PORT=8080

After completing the above steps

# Start the Server
$ npm start

Congratulations your API's are now set up!

Please continue to the Client Side to begin application.

Tech Dependencies

Installed via npm install in previous step

google-cloud translate, helmet, lyrics-finder and spotify-web-api

Next Steps

While the Lyrify app is certainly enjoyable, there are some aspects that could be optimized to make it even more engaging and satisfying for users.

Here are a few ideas i'd like to implement to enhance your experience on Lyrify.

Allow lyrify to listen and identify music by using its microphone feature. Currently it is limited to voice input.
Set up a database for the numerous request passed to Lyrify.
Allow users to add and edit their own lyrics, therby expanding the database and not relying on the API entirely.
Allow users to switch translation into any language of their choice instead of the default English.
Add more pages that allow users to explore their curated Spotify Playlist for easier choosing of songs

Credits:

Support and guidance from the BrainStation Educators and TA's