Melody Monitor for OBS

⚠️Works only on Windows⚠️

Installation

1. Download archive from Releases
2. Unpack it to a place convenient for you.
3. Run melody-monitor.exe (The program will start in the tray).
4. Click Open in Browser and copy the link in your browser.
5. Add a new source in OBS (Browser).
6. Paste the copied link into the URL field
7. Adjust the height and width of the element (recommended: height: 150px, width: 600px)
8. Check the box "Refresh browser when source becomes active"

Settings

To change settings, create a file settings.user.json next to the melody-monitor.exe.
You can change these settings now:

{
	"host": "127.0.0.1",
	"port": 8000,
	"interval": 3,
	"theme": "light"
}

You don't need to specify all the settings, specify only those that differ from the default.

---

Host

Specify 0.0.0.0 if you want to open access to all computers on the local network.

Interval

How often the program will call the Windows API to update media data (seconds)

Theme

Specify dark if you want a dark theme

---

Modifications

If you want to add custom styling (for example, change accent color), you need to create a mods folder next to the melody-monitor.exe.
Then create a file with any name ending in .css.
Hint for changing colors:

body {
    --background: rgba(255, 255, 255, 0.8);
    --shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    --title-text-color: black;
    --artist-text-color: #666;
    --progress-bar-color: #007bff;
    --progress-bar-background: #bbb;
}

You can see community mods here.

---

💲Donate

	Donatello
	Donation Alerts