Setting up OBS

Setting Up Song Display in OBS

There are multiple ways to display the currently playing song in OBS using Songify. Choose the method that best fits your needs:

---

1. Using the Widget

The widget is a simple and customizable way to display song information.

1. Add a Browser Source to your OBS scene.
2. Set the URL to the one generated by the widget generator.
3. Set the width and height to 312x64 for optimal display.

---

2. Using Source Files (Text and Image)

This method reads song information directly from files in the Songify folder.

1. Add a Text Source:

   • Create a new Text Source in OBS.
   • Enable the option Read from file.
   • Browse to one of the following files in the Songify folder:
     • Songify.txt (contains the full song information as a single string).
     • Artist.txt and Title.txt (contains artist and title as separate files).

2. Add an Image Source:

   • Create a new Image Source in OBS.
   • Browse to the cover.png file in the Songify folder. This file contains the album cover of the currently playing song.

---

3. Using Custom HTML and CSS

If you're familiar with web development, you can create a custom widget using Songify's web server API.

1. Access the Web Server Endpoint:

   • Songify exposes a live data endpoint that provides song information in JSON format.
   • The data updates with every request made to the API.

   Example API response:

   {
       "Artists": "",
       "Title": "",
       "Albums": [
           {
               "Url": "",
               "Width": 0,
               "Height": 0
           }
       ],
       "SongId": "",
       "DurationMs": 0,
       "IsPlaying": true,
       "Url": "",
       "DurationPercentage": 0,
       "Progress": 0,
       "Playlist": {
           "Name": "",
           "Id": "",
           "Owner": "",
           "Url": "",
           "Image": ""
       },
       "FullArtists": [
           {
               "ExternalUrls": {
                   "spotify": ""
               },
               "Name": "",
               "Uri": ""
           }
       ],
       "CanvasUrl": "",
       "Requester": "",
       "QueueCount": 0,
       "Queue": []
   }