This is the Client Side of the Project
Motivation • Key Features • How To Install • Live View • Tech Dependencies • Demo • Next Steps • Credits
Music is the language without barriers, in recent years, we are seeing an uptrend of this in the music we listen to, BTS, a Korean boy band is considered a high achiever of having their music play across radio stations globally. Back in 2002, Macarena was charting as top dance song. Though the songs are great, unless you are native to the language, it is difficult to understand what is the meaning behind the song's lyrics. On the otherside we have English songs, whose lyrics everyone is curious to learn as the artist of the song intended to write. An example of this is SAINt JHN - Roses (Imanbek Remix)
Lyrify will help bridge that gap by displaying the lyrics for every song searched via Spotify as well for the non-english songs, provide a translation so everyone can read the thoughts conveyed via the music.
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
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
To Run the Program on the Client Side Please ensure Server Side is set up and running then 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.git
# Go into the folder
$ cd lyrify-capstone
# Install dependencies
$ npm install
# Run the app
$ npm startOpen http://localhost:3000 in a browser to view the app
Lyrify is Live!
Lyrify has come to life on any web browser, thanks to the host support from railway. Both the client side and the server side are deployed via the railway app. However during testing, i ran into a few notable discrepencies due to which i am unable to guarantee the use of the live version for Lyrify.
Some notable issues are:
Spotify supports Digital Rights Management (DRM). DRM is used to protect an organization's digital media from unauthorized use and to ensure a company retains control over the distribution of digital content.
Spotify player may not be available if DRM permissions are not granted on your device.
As a Test, Firefox for mobile ask for permission and if you allow, the player will show on the page.
Please refer to article for Google Chrome browser errors.
Installed via npm install in previous step
spotify web playback, spotify-web-api
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
Support and guidance from the BrainStation Educators and TA's