#

How does it work?

This module shows the lyrics of the song that you are currently listening to. Uses the MMM-OnSpotify module to get the requiered data from Spotify and to sync color data (to give the module a refreshing look!). You can customize almost everything in the module, so you can use it on lower end devices or give it custom functionality.

It also includes a Remote Control and API. You can read more about the Remote Control here, and more about the API here

The module uses the Genius API directly and the Spotify API through MMM-OnSpotify.

Installation

Step 1: Install the module

cd ~/MagicMirror/modules
git clone https://github.com/Fabrizz/MMM-LiveLyrics.git
cd MMM-LiveLyrics
npm install

Step 2: Get a Genius API Token

• Log in to the Genius API Dashboard.
• Click on "NEW API CLIENT", then, give you app a name, something that you could remember later, like "MagicMirror" or "LiveLyrics". You also need to set the app url, as its not actually a service, you can put whatever you want, for example "https://livelyrics.com/" or "https://test.com/".
• Click on "Generate Access Token", copy the token, as you are going to need it in the next step, in the accessToken field.

Step 3: Set the module in your config.js file

{
  // This is the base config. See more config options below
    module: "MMM-LiveLyrics",
    position: "fullscreen_below", // Do not change position
    config: {
        accessToken: "YOUR ACCESS TOKEN", // Paste here your token
    }
},

Note Remember to update MMM-OnSpotify to the latest version, so the modules can get the necessary data from each other. | Minumum supported version: V2.2.0

Module configuration

The module ships with defaults that priorize a vertical mirror and the use of Dynamic Theming, the next section ilustrates the basic style options of the module, on the advanced section you have every configuration option as well as a detailed explanation.

Basic style options:

Advanced options:

The following code block contains the all the module options:

{
    module: "MMM-LiveLyrics",
    position: "fullscreen_below", // Do not change position
    config: {
        accessToken: "YOUR ACCESS TOKEN", // Paste here your token

        // Module behaviour [See below]
        useDefaultSearchFormatter: true,
        useMultipleArtistInSearch: true,
        logSuspendResume: false,
        showConnectionQrOnLoad: false,
        connectionQrDuration: 12,
        sideBySideOnLandscape: false,
        startHidden: false,
        hideSpotifyModule: true,
        updateTopModulesCalcOnData: true,

        // Lyrics style [See below]
        lyricsFillType: "containerCalcTopModules",
        lyricsContainerBackdropStyle: "black",
        lyricsStyleTheme: "dynamicblobsFull",
        lyricsFontName: null,
        lyricsFontSize: null,
        lyricsTextAlign: null,
        lyricsCustomFixedDimentions: false,

        // Scroll and others [See below]
        scrollStrategy: "bySections",
        scrollUpdateEvery: 3,
        hideStrategy: "flex",
        blurToBlackOnFull: false,
        useAnimations: true,
    }
}

Behaviour options:

Key	Default	Description
useDefaultSearchFormatter	true	The module includes regex matching for certain pages, words or urls that do not return lyric data, if you want to only use custom regex, you can disable this option. (Module and custom can be used at the same time if enabled) See more below.
useMultipleArtistInSearch	true	If you want to use multiple (2) artists when searching for the song lyrics.
logSuspendResume	false	If the module should log when the visibility changes.
showConnectionQrOnLoad	true	Shows a banner with a QR code to use the remote controller. It uses your server IP and MM2 configuration to generate the url.
connectionQrDuration	12	The time the connection QR is shown before the module is loaded.
sideBySideOnLandscape	false	If you have a big landscape screen, you could want to show the lyrics/info horizontally instead of vertically.
startHidden	false	If the module should start hidden. Soft hidden ≠ Module hidden, this refers to the second, if set to true, the module starts hidden to the MM2 system, being only shown if called via the api or the remote. (This option also depends on what hideStrategy you use.)
hideSpotifyModule	true	If MMM-OnSpotify should be hidden when this module is loaded, as we are working with low power devices and overlaying data over other modules, showing both is not necessary.
updateTopModulesCalcOnData	true	If the calculations for the top modules region clerance should be done everytime the player updates. This is usefull, for example, if you have a calendar that is updated often and the height is not fixed.

Lyrics style:

Warning

• If you are using a RPI4 I recommend to keep the basic provided settings.
• If you are using the running the server on oter machine or using a higher power device, you can turn on the animations setting, giving the module better color transitions on song changes.
• If you are using a RPI3 or below, its recommended to disable animations and use the scroll by sections, as its not repainting every tick. You can also use CSS to disable basic animations like the fade in or the breathe on song lookup.

Scroll | Other:

Remote & API:

The remote can be accessed using <mirror:port>/LiveLyrics, it gives you an interface to hide/show the module, see the lyrics and a panel to debug the module data flow.

You might need to set your mirror to allow local connections, you can do this by going to the MagicMirror config.js file, and setting the ipWhitelist to []. (Allowing any device to connect to the mirror) (If you have static or reserved IPs you can do a per device whitelist)

API:

Custom regex:

You can use custom regex editing LILYREGEX.js, you can extend the included one adding a regex expression. You can disable the included regex setting useDefaultSearchFormatter to false. If this is not enough (other languajes, etc), you can edit the utils/LyricsFetcher.js file.

With <3 by Fabrizz | Give it a star if you like it!
fabriz.co (also work in progress)