Git Product home page Git Product logo

mmm-livelyrics's Introduction

Fabrizz logo

MMM-LiveLyrics banner

MMM-LiveLyrics banner

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:

MMM-LiveLyrics display options

MMM-LiveLyrics style options

MMM-LiveLyrics backdrop configuration

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.

Connection QR Code
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.

Side by side module view
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.
Key Default Description
lyricsFillType containerCalcTopModules [Ilustration] How the height is calculated and if its shown inside a container. Options:
- container: Uses all the space in the viewport, contains the lyrics in a container. (Uses MM2 gap calcs)
- full: Uses all the space in the viewport, does not contain the lyrics.
- containerCalcTopModules: Uses the full viewport but the height is determinated calculation the longest top region, also uses MM2 gap calcs to give it a balanced look. You can access the dynamic CSS variables to create custom styles.
- fullCalcTopModules: The same as containerCal..., but its shown as a card in the bottom region instead of a floating container.
Every option styles (or removes) the backdrop differently.
lyricsContainerBackdropStyle black [Ilustration] If the fill type is a container and you are not using fullscreen dynamic theming, you can select the style of a backdrop between the modules and the lyrics container. Options:
- CSS: Use any css color value, (black, #0000004e, etc)
- blurred: Applies a CSS filter based on em size, not recommended on lower end devices, as blurring is a gpu intensive task.
lyricsStyleTheme dynamicblobsFull [Ilustration] How the module is going to be styled. Options:
- dynamicColors: Uses the data from OnSpotify to theme the background/foregorund colors.
- dynamicBlobs: Uses the data from OnSpotify to show a (gpu intensive) background using a palette extracted from the cover art.
- dynamicblobsFull: Uses the data from OnSpotify to show a (gpu intensive) background using a palette extracted from the cover art. (Full viewport size, changes default Zindexes, uses the backdrop as a socket for the grid)
- normal: Uses the default white/gray shades from MM2
lyricsFontName null Font name, you can use included ones or other loaded in MM2.
lyricsFontSize null Font size, its recommended to use em unitees so its based on higher level sizing.
lyricsTextAlign null Defaults to the left, you can align the lyrics text to center or the right.
lyricsCustomFixedDimentions false If you enable this option, all the CSS calcs are removed, you can override all the --LILY-[VAR] variables to fine size the module/backdrop.

Scroll | Other:

Key Default Description
scrollStrategy bySections How the lyrics are going to be scrolled. Options:
- bySections: The lyrics are divided in parts and then they are scrolled depending on the percentage of the song. (Giving it a effect but not using getAnimationFrame)
- byAnimationFrame: The lyrics are moved based on percentage, uses AnimationFrame to give it a "smooth" scroll look, does not work that great on lower end devices.
- false: The lyrics are not moved, useful if you have an external script or a custom way of showing the lyrics.
scrollUpdateEvery 3 If the scrolling is done by parts or not completly in sync, this update time is used to wait between updates.
hideStrategy flex Options:
- false: The module is always shown.
- MM2: Uses the included MM2 hide/show methods to control the module. Overrides anything that is set by the user.
- flex: When nothing is playing the module is soft hidden, you can use MM2 to hide/show the module. The module is not shown again if music starts playing (after you set the module to hide). This is the best option if you want to enable the module using the remote or using scenes / a smarthome system.
blurToBlackOnFull false If the blurred backgroud (dynamicblobsFull) should go black in the borders so the ilussion of a bigger screen below mirror is preserved. See an example in the MMM-OnSpotify repository.
useAnimations true If the module should use transitions to switch between color palettes and module states.

Remote & API:

Remote control

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:

Api, event stream

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) Fabrizz logo

mmm-livelyrics's People

Contributors

fabrizz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

mmm-livelyrics's Issues

Landscape Mode

Hey, Is there any change to get a Mode for Horizontal Screens which will place the Lyrics in the whole middle section?

I have some modules to the left and right, but nothing in the middle. Therefore it would be nice to have the Lyrics in the complete middle section (from top to bottom) since it will not overlap the oder modules on the side.

Also, a hideStrategy when no lyrics are found would be awesome :)

Thank you!

Hi. I have a question.

So, theres an API for showing/hiding the lyrics right? Is there a way we can integrate that with Amazon Alexa to show and hide the modules?

Custom CSS?

Hey, sorry if this is a stupid question. But how do I apply custom CSS to the module? Using the ~/MagicMirror/css/custon.css doesnt seem to take effect.

The Readme is a bit confusing as it mentions dynamic CSS variable but nothing more on what that means.

Am I missing something obvious?

Adapting scrolling to other input/div

Hello,

I've recently been working on adapting your module to be compatible with Plex, which is the main way that I listen to music. I've got most of the functionality working, but I can't find a way to switch between divs for monitoring where in the lyrics I am.

Currently, scrolling is done by monitoring the div stored in the PLAYERPROGRESS variable. I tried conditionally modifying this variable such that when music is playing from plex, it uses my data to determine the percentage, but when music is playing through Spotify, it behaves as it currently does but didn't seem to have any luck. I want the module to work for both Spotify and Plex, and this is the last puzzle piece haha.

I played around a bit with modifying the scroller_bySections() function but didn't have a ton of luck as a lot of it is set in constants that didn't take kindly to modifying.

I already have all the percentage calculations done for Plex, I just need a way to have the module scroll like it does for Spotify.

Thanks for any suggestions you might have (And the great module)!

When? How?

How do I get this module? Or do I have to wait?

No download instructions in the README...

MMM-OnSpotify does not hide when LiveLyrics is showing

I recently updated my MagicMirror with a new Raspberry Pi 4 and the most recent software following the manual installation instructions provided by the MagicMirror documentation (as of a few days ago).

While LiveLyrics is open, the OnSpotify module does not hide. I tried to force the behavior by setting the hideSpotifyModule to true but no luck. My access tokens work just fine.

2023-08-06-133204_1080x1920_scrot

An example screenshot of the behavior is below.

Additionally I have whitelisted all the IP address using the following line in the config:
ipWhitelist: []

let config = {
	address: "localhost",	// Address to listen on, can be:
							// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
							// - another specific IPv4/6 to listen on a specific interface
							// - "0.0.0.0", "::" to listen on any interface
							// Default, when address config is left out or empty, is "localhost"
	port: 8080,
	basePath: "/",			// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
					  		// you must set the sub path here. basePath must end with a /
	ipWhitelist: [],	
	useHttps: false, 		// Support HTTPS or not, default "false" will use HTTP
	httpsPrivateKey: "", 	// HTTPS private key path, only require when useHttps is true
	httpsCertificate: "", 	// HTTPS Certificate path, only require when useHttps is true

	language: "en",
	locale: "en-US",
	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
	timeFormat: 12,
	units: "imperial",

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left",
			showPeriod: true,
			showSunTimes: true

		},
		{
			module: "calendar",
			position: "top_left",
			config: {
				calendars: [
					{
						url: $$TOKEN$$
					}
				]
			}
		},
		{
			module: "weather",
			position: "top_right",
			config: {
				weatherProvider: "openweathermap",
				type: "current",
				apiKey: $$TOKEN$$
				
			}
		},
		{
			module: "weather",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				weatherProvider: "openweathermap",
				type: "forecast",
				apiKey: $$TOKEN$$
			}
		},
		{
			module: "MMM-OnSpotify",
			position: "top_left", /* bottom_left, bottom_center */ 
			config: {
				clientID: $$CLIENT$$,
				clientSecret: $$SECRET$$,
				accessToken: $$TOKEN$$,
				refreshToken: $$TOKEN$$,
				displayWhenEmpty: "user",
				spotifyCodeExperimentalShow: false,
			}
		},
		{
		// This is the base config. See more config options below
			module: "MMM-LiveLyrics",
			position: "fullscreen_below", // Do not change position
			config: {
				accessToken: $$TOKEN$$,
				showConnectionQrOnLoad: false,
				hideSpotifyModule: true,
			}
		},
		{
			module: "newsfeed",
			position: "top_bar",
			config: {
				feeds: [
					{
						title: "New York Times",
						url: "https://rss.nytimes.com/services/xml/rss/nyt/HomePage.xml"
					}
				],
				showSourceTitle: true,
				showPublishDate: true,
				broadcastNewsFeeds: true,
				broadcastNewsUpdates: true
			}
		},
	]
};

Do I need to configure someone for module cross-talk? Do you have any suggestions on how to debug communications between modules?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.