A Synced Lyrics Music Player built with TypeScript

by React

Synced Lyrics Music Player

This project is a music player with live, synced lyrics. The frontend is built using Vite React App and the backend is built using Express. Live, synced lyrics are provided by the sync-lyrics package.

Installation

To install the project, follow these steps:

  1. Clone the repository to your local machine:

    git clone https://github.com/samocodes/synced-lyrics-music-player.git

  2. Install the dependencies for both the frontend and backend:

    cd synced-lyrics-music-player
yarn

  3. Edit the .env file.

  4. Start the server:

    yarn start

    This will start the app in development mode. Open http://localhost:5173 to view it in the browser.

Usage

The synced lyrics music player allows you to play music with live, synced lyrics. To get started, simply:

  1. Add music file to backend/music directory. And put the data in backend/data.ts
  2. Start playing the music and the lyrics will be displayed in real-time, synced to the music.

You can also control the playback of the music using the player controls, such as play/pause, and adjust the volume.

Contributing

If you would like to contribute to the project, feel free to submit a pull request. Before submitting a pull request, please ensure that your code follows the project’s coding standards and that all tests pass.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Features

  • Provide live lyrics for the spotify tracks
  • Support color from thumbnail.

TODO

Full support will all the screens.

Author

SamoCodes

GitHub

View Github