Spotify.Lyrics.Translator.v0.1.demo.-.Made.with.Clipchamp.mp4
🎵 A NextJS/React lyrics translator app designed to work with Spotify Desktop 🎤🎵
Report a Bug · Request a Feature
Check out Moegi Spotify Web Extension made by @sglkc (Credits for the original idea & design inspiration)
This app communicates with Spotify Desktop through the Spotify Web Playback SDK, more native OS-level extension possibilities compared to the Chrome extension for the Spotify Web Player, which primarily modifies CSS.
This project was built primarily for educational purposes and to explore additional functionalities that could be extended into:
- Audio reactions
- AI-driven lyrics analysis
- Community insights (e.g., integration with Genius)
The app should be portable to Mac, Linux, and mobile devices, although these platforms haven't been tested yet.
-
Japanese Romanization is incomplete due to the complexity of Kanji.
-
Language settings have not yet been implemented.
- Clone the repo
git clone https://github.com/in-c0/spotify-lyrics-translator.git
- Install dependencies
npm install
- Set up Environment Variables
NEXT_PUBLIC_SPOTIFY_CLIENT_ID=...
SPOTIFY_CLIENT_ID=...
SPOTIFY_CLIENT_SECRET=...
NEXT_PUBLIC_SPOTIFY_REDIRECT_URI=http://localhost:3000/callback
SPOTIFY_REDIRECT_URI=http://localhost:3000/callback
GOOGLE_TRANSLATE_API_KEY=...
- Run the development server
npm run dev
To set up this app, you’ll need both Google Translate API and Spotify Developer credentials.
If you are developing locally, create a new file in the root project directory named .env.local. (Do NOT share your API keys/Secret or commit the file!)
-
Create a Google Cloud developer account and generate your API key.
Note: The Google Translate API is not free. If you're looking for alternatives, check out google-translate-api-x.
GOOGLE_TRANSLATE_API_KEY=...(Set up here: https://cloud.google.com/apis)
Set up your Spotify Developer account and obtain your client secret.
SPOTIFY_CLIENT_SECRET=... (Set up here: https://developer.spotify.com/documentation/web-api)
Your final .env would look something like this for local development:
NEXT_PUBLIC_SPOTIFY_CLIENT_ID=...
SPOTIFY_CLIENT_ID=...
SPOTIFY_CLIENT_SECRET=...
NEXT_PUBLIC_SPOTIFY_REDIRECT_URI=http://localhost:3000/callback
SPOTIFY_REDIRECT_URI=http://localhost:3000/callback
GOOGLE_TRANSLATE_API_KEY=...
I’m exploring ways to make this app more accessible to users, as most cloud-based solutions incur costs. Some ideas for future development include:
- Running everything locally, reducing dependency on cloud services (except for Spotify interaction), i.e.
- Local LLM for translation (GPT4ALL)
- Local transcription AI (e.g. Moises.ai or finetune Whisper, if there is a reliable way to somehow extract only the vocals out)
(... or I could host a server with a couple of ads, as long as it aligns with the license agreements... It probably won't in the current state given the Musixmatch API being difficult to obtain.)
A big thank you to @BlueCatSoftware for providing the Lyrix through Musixmatch, and to @sglkc for the inspiration behind this project (Chrome Extension).
MIT License
Credits appreciated but not necessary.
Feel free to start a new Discussion or create a new Issue. Contributions are welcome via issues or PRs!
Please note that directly modifying the Spotify Desktop client may violate Spotify's Terms of Service. Although this app does not modify the Spotify client directly, please ensure that you comply with all relevant terms and conditions when using this app.