This Lyrics App (Spotify) is a desktop application that allows users to view lyrics for the currently playing Spotify track of their own spotify account. The app is built using Tauri, React, TailwindCSS and Rust, and it leverages the Spotify API to fetch track details and use NeteaseCloudMusicApi to fetch the lyrics.
- Spotify Authentication: Users can log in with their Spotify account.
- Lyrics Display: Fetches and displays lyrics for the currently playing track.
- Persistent Storage: Stores (Caching) lyrics locally for faster access.
- Node.js (v20.x or later)
- Rust (latest stable version)
- Tauri CLI (v1.0 or later)
- Spotify Developer Account
git clone https://github.com/tckeong/lyrics-app.git
cd lyrics-app
Frontend (React)
npm install
Backend (Rust)
Ensure you have Rust installed. If not, install it using rustup
- Go to the Spotify Developer Dashboard
- Create a new application and note down the Client ID and Client Secret.
- Set the Redirect URI to
http://localhost:8081/callback
- Use the method provided by the NeteaseCloudMusicApi repository to setup the NetEaseCloudMusicAPI server.
- In this app, we use docker as the lyrics server (using port 3000).
- Development Version
npm run tauri dev- Release Version
npm run tauri buildGet the installer from src-tauri/target/release/bundle
- Login: Open the app and log in with your Spotify credentials (Need the Client ID and Client Secret from Spotify Developer Dashboard).
- View Lyrics: Play a song on Spotify. The app will fetch and display the lyrics automatically.
- Save Lyrics: The user can choose to save the lyric or not (for caching convenience). The user can check the lyrics list that saved by them.
| spotify-lyrics-app/
├── src-tauri/ # tauri src
│ ├── src/
│ │ ├── main.rs # Main Rust entry point
│ │ ├── api/ # Handles all api
| | | ├── spotify_api/ # Handles all spotify api, like get spotify credentials, get current playing track and so on
| | | ├── server.rs # Handles all api relevant to callback and get the spotify api token
| | | └── mod.rs # Abstract the api, make them easier to use by the controllers
| | ├── controllers/ # Handles all tauri frontend app function invoke
| | ├── models/ # Handles all the web response data models
| | └── utils/ # Handles all the services that relevant to create local folder and local file
│ ├── tauri.conf.json # Tauri configuration
│ └── Cargo.toml # Rust dependencies
├── src/
│ ├── components/ # React components, stores all the components that used in the pages
| | └── utils/
| ├── pages/ # stores all the pages
│ └── App.tsx # Main React component, handles the pages route
├── package.json # Node.js dependencies
├── tailwind.config.js
├── vite.config.ts
└── README.md # This file
- Authentication Errors: Ensure your Spotify API credentials are correct and the Redirect URI is properly set.
- Missing Lyrics: The app relies on external APIs for lyrics. Ensure the APIs are accessible.
- Lyrics Mismatching: Sometimes the lyrics may mismatching, this may occurs due to the NetEaseCloudMusicAPI searching problem, already make some advancement about this such as: translate the name of chinese singer, and remove some irrelevant things in song name, and handle some special case that the singer name cannot be translate properly.
Contributions are welcome! Please fork the repository and submit a pull request with your changes.
Feel free to create issues if you meet any problem when using this app, plan to do advancement in following things:
- add the lyrics edit page, such that the user can edit the lyrics manually.
- add the link in the lyrics list page, when user press on the link, it will make spotify jump to the song that user choose.
This project is licensed under the MIT License. See the LICENSE file for details.