/current-song-overlay

Display the currently playing song/audio from the Browser, VLC or Spotify

Primary LanguageTypeScript

Current Song

⚠ This project will be rewritten at Nerixyz/current-song2.

This application allows users (probably streamers) to show the playing song without worrying too much about the setup. Ideally you'll install the extension, start a service, and you are good to go. Now with Spotify you can't do this, you'll have to manually go in your browser and get the cookie. Maybe I'll change that.

Sections

Main Features

  • It's one of the first true realtime clients for Spotify and YouTube (VLC is using the most lightweight option to use all features, a Lua interface). The local server does not constantly poll Spotify and YouTube.
  • Watch progress is shown for Spotify, YouTube and VLC (others to come).
  • The server can be ran as a Windows Service so won't show up as a window and is started once the PC starts.
  • It always tries to show the last updated source so viewers immediately know the song.
  • The overlay is fully customizable through the config.css file in the overlay directory.

Supported Interfaces

  • Firefox, Chrome, new Safari (and other Browsers implementing the WebExtensions API)
  • Spotify (requires a Cookie to work, any device is supported)
  • VLC (Lua Interface)

Supported Websites

These are known websites, the browser extension works with. Websites not listed here aren't tested yet but might already be supported.

Website Title Progress Bar
YouTube ✅ ✅ *
SoundCloud ✅ ✅
Neverthink.tv ✅ ✅
Twitch ✅ ❌
CyTube ❌ ❌

* Livestreams aren't supported

How to set it up

Extract the build-...zip into some folder.

If you've never used this application, run setup.bat

This application consists of multiple "modules" you can toggle. The main configuration can be found in config.json.

  1. Run create-service.bat as Administrator (right click the file and select Run as Administrator). Note: your AntiVirus might question this action or block it.
  2. Start the service by running start-service.bat as Administrator.

You can restart the service (needed once you've changed .env or config.json).

You are also able to change the appearance of the overlay. To do this, open the config.css in the overlay directory. You don't have to restart the service. You only need to reload the overlay.

This is how you configure each module:

Spotify

  1. Get the sp_dc cookie from open.spotify.com (see below for Chrome and Firefox)
  2. Open the .env file in the current folder
  3. Paste the value next to SPOTIFY_COOKIES="sp_dc=
  4. The line should now look like this: SPOTIFY_COOKIES="sp_dc=AB3DE6...-A2CD5FG..."
  5. Make sure the spotify module is enabled and configured in your config.json:
{
  "modules": {
    ...
    "spotify": {
      "enabled": true,
      "options": {
        "cookies": ":env#SPOTIFY_COOKIES"
      }
    },
    ...
  }
  ...
}

:env#SPOTIFY_COOKIES will read the variable SPOTIFY_COOKIES into cookies

Chrome

  1. Open open.spotify.com (and log in)
  2. Open the Developer Tools (CTRL + SHIFT + I or F12)
  3. Go to the Application Tab
  4. In the left pane, in Storage, select Cookies and then https://open.spotify.com
  5. In the table, search in the Name column for sp_dc
  6. Copy the Value (double-click the cell and press CTRL + C)

Firefox

  1. Open open.spotify.com (and log in)
  2. Open the Developer Tools (CTRL + SHIFT + I or F12 or SHIFT + F9)
  3. Go to the Storage Tab
  4. In the left pane, select Cookies and then https://open.spotify.com
  5. In the table, search in the Name column for sp_dc
  6. Copy the Value (double-click the cell and press CTRL + C)

Browser

Firefox

The addon is available on addons.mozilla.org (click).

Chrome

Note: Due to this 6 year old bug, the extension will always show the currently playing song as it can't detect a non focused window.

The addon is available on the Chrome WebStore (click).

VLC

  1. Run the file setup.bat. If you have a regular VLC setup, the vlc module will work.
  2. Make sure vlc is enabled in your config file

Error Guide

  • Service not available or **cannot run setup.ps1:

    • Open a new powershell window as Admin.
    • Run Get-ExecutionPolicy -List
    • If the ExecutionPolicy for CurrentUser says Undefined then run Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
    • Right click the build-master-<hash>.zip and open the properties.
    • At the bottom, check the box saying "Unblock" and click Apply and Close.

  • File not found, in a folder with spaces

    • For now, make sure to put this in a folder without spaces (and no spaces in parent folders).

  • Service Output (stdout/stderr) redirection (e.g. when the service isn't starting):

    • stdout .\nssm set CurrentSong AppStdout <path-to-logfile>.log
    • stderr .\nssm set CurrentSong AppStderr <path-to-logfile>.log

For more details, see dudo24's Error Guide.

Examples

YouTube Player

YouTube Player

Spotify Player

Spotify Player

Styled Player

Styled Player

Developing

  • Client (Overlay) Run npm i or yarn and run the script dev. It will automagically rebuild. You can (most of the time) access the overlay on localhost:5000. You can use the server's functionality of hosting the overlay. Define the NON_BUILD_ENV environment variable (the value doesn't matter, use e.g. 1) and run the server.

  • Extension Run npm i and run the script rollup-watch. You can import the extension in Firefox in about:debugging#/runtime/this-firefox.

  • Server Run deno run --allow-read --allow-net --allow-env server/src/index.ts. It will read the .env file, however it won't automatically rebuild.