Spotify Lyrics

Install Extension:

• Chrome/Chromium/Firefox: Download the zip on the release page, and then load the extension on the extension management page of the browser. reason.
• Safari(Soon)

The extension adds a button to the bottom left corner of Spotify Web Player, Click to switch the display status of the lyrics, which is displayed in the Picture-in-Picture window by default setting. Spotify can be installed as pwa instead of desktop client.

If you have any questions, please submit an issue.

The extension also supports Youtube Music, Apple Music, Deezer and Tidal, but songs with videos in Youtube Music cannot be perfectly supported(because the duration of the video is different from the duration of the officially released audio track).

How To Work

1. Listen for track info element.
2. Search for songs and download lyrics using NeteaseCloudMusicApi.
3. Rendering lyrics to <canvas>.
4. Capture video stream from <canvas> and merge cover image.
5. Update lyrics scroll position with a loop.

Compatibility

• Firefox 78+ (Not support PiP)
• Edge 79+
• Chrome 70+
• Safari 14+

Development

Requirement: Node.js

# install dependencies
yarn
# start develop
yarn run start
# optional: start firebase function simulation
yarn run start:firebase

Build:

yarn run build:zip

# firebase depoly and config update
# npm i -g firebase-tools
firebase depoly
firebase functions:config:get
firebase functions:config:set spotify-lyrics.manager-ids=xxx

Match Success Rate

Spotify, v1.2.7, Friday, July 31, 2020

Contribution

Fork it, submit PR.

• Add translation
• If you can write code, you can fix bugs or improve performance
• Optimize the matching rate of Chinese, Japanese and Korean lyrics.(edit config.json). Note: The extension already has automatic optimization, this list serves as a supplement . Unmatched lyrics report

Privacy Policy

see.