Logo

SPOTIFY & SB

A full Spotify integration in Streamer.bot!

Your viewers can finally request the dumbest songs possible Pog But at least your mods can also skip songs or lower the volume in case you forgot your audio engineering degree at work...
catJAM _EDM
Note: This extension requires Spotify Premium

ACTION IMPORT
Loading...
SETUP

1. Copy the Action Import text from above into your clipboard.

2. In Streamer.bot, click the Import button at the top of the window. Paste the text into the Import String section and press Import at the bottom.

3. Now head to the Commands tab and look for the imported commands. Then rightclick the group and select Group -> Enable All.

4. Go to https://developer.spotify.com/ and login with your Spotify account. Then enter your Dashboard and hit Create app.

5. Enter App name and App description (those can be whatever). Then copy this URL:

http://127.0.0.1:1312/tawmaeSpotify/


Paste it into the Redirect URIs. It's important that this link is this exact one.

Accept the ToS and hit Save.

6. Now that your app has been created, click on Settings in the top right corner. Click View client secret below Client ID to reveal your Client secret. We will need both of them in a second.

7. In Streamer.bot, head into the [SPOTIFY & SB] # 0 - Settings action, rightclick the Test trigger and hit Test Trigger to open the Settings UI. Paste your Client ID and Client secret in there and hit Connect. A browser page will open up and you'll need to click Accept.

If the connection button turned green, you are good to go. Happy spotifying... or whatever!

catJAM Clap

COMMANDS

!sr [Song]

Adds a song to the queue. Can be the song name, the direct Spotify link and even a YouTube link (for YouTube links, the video title will be used as the query). Spotify links are the only method to get the 100%ly correct request in.

!song

Posts the currently playing song into chat.

!songLink

Posts the currently playing song with its Spotify link into chat.

!last

Posts the previously playing song into chat.

!skip

Skips the currently playing song.

!back

Replays the previously played song.

!playlists

Posts the owned playlists into chat.

!addSong [Playlist]

Adds the current song to a specified playlist. Can be the playlist's name or its index number.

!playPlaylist [Playlist]

Plays the specified playlist. Can be the playlist's name or its index number.

!banSong

Bans the current song from song requests.

!unbanSong [Index]

Bans the specified song from song requests.

!bannedSongs

Posts the banned songs with their index into chat.

!queue [Number]

Posts the upcoming songs into chat. Defaults to (3) without a number, max. (10).

!play

Resumes the currently paused song.

!pause

Pauses the currently playing song.

!vol [Number]

Sets the volume of the player. Can also be a number like (+10) or (-10) to add/subtract to/from the current volume. Not entering [Number] will output the current volume to chat.

!devices

Posts the list of available devices into chat.

!setDevice [Index]

Changes the active device.

!voteskip

Vote to skip the currently playing song.

!removeFromQueue [Songname]

Removes the requested song from the queue. Once the song starts, it will automatically skip it. The name doesn't have to be exact.
The action also populates user variables on a successful removal and auto-refunds channel points if any have been spent.

!queuePosition

Posts your current requests in queue into chat with their respective queue position and the remaining time until the first request will play.

!requests

Posts the amount of all requests and their total run time into chat.

OBS WIDGET



https://tawmae.xyz/overlays/spotify-and-sb.html


How can I use the widget?

Copy the URL from above and add it as a Browser Source into your OBS. Make sure your Websocket Server in the Servers/Clients -> WebSocket Server tab is enabled and set to 127.0.0.1 and 8080.

Here you can check in real-time if your Websocket server is up and running:


If you want to customize it, you can use the URL builder below.

URL Builder:

https://tawmae.xyz/url-builder/spotify-and-sb



If you want to add them manually, the URL Parameters are placed at the end of the URL. The first parameter is getting added with a ?, every additional one with a &.



Background Color

Changes the background color of the background box. Supports hex colors, but then you need to replace the # with %23

backgroundcolor=pink


backgroundcolor=%23ffc0cb

Font

Changes the font used for the text. Supports standard and google fonts.

font=Arial


font=Poppins

Font Color

Changes the color of the font. Supports hex colors, but then you need to replace the # with %23

fontcolor=black


fontcolor=%23000000

Progress Bar Color

Changes the color of the progress bar. Supports hex colors, but then you need to replace the # with %23

progressbarcolor=pink


progressbarcolor=%23ffc0cb

Always On

You can make the overlay only show whenever a new song begins.

alwayson=false

Progessbar Toggle

Removes the progress bar.

progressbar=false

Opacity

Changes the opacity of the background.

opacity=69

SETTINGS UI

The Settings UI allows for some customization.



General
You can not only connect your Spotify client here, but you can also set up some general restrictive rules regarding song requests. Their max. duration, followers-only etc.

Chat Messages
This tab allows you to customize the chat responses. You can make use of the variables listed below each message.

CUSTOM TRIGGERS

Under Custom -> SPOTIFY & SB you will be able to find triggers whenever a new song plays or a song gets paused/continued with song info variables.


New Song

Fires when a new song starts
(also fires if the same song gets played over/reset)

Available variables:

  • trackId (string) - the ID of the track
  • trackName (string) - the name of the song
  • artists (string) - the artist(s) of the song
  • coverImageURL (string) - the image URL of the cover art
  • isPlaying (bool) - indicator whether the new song is playing when it comes up
  • progressMs (int) - the new song's progress in milliseconds
  • durationMs (int) - the new song's total duration in milliseconds
  • progressTimeFormatted (string) - the new song's progress time in a mm:ss format
  • durationTimeFormatted (string) - the new song's total duration in a mm:ss format
  • isRequested (bool) - indicator whether the new song has been requested or not
  • user (string) - the display name of the requester (null/empty if not requested )
  • userName (string) - the user login of the requester (null/empty if not requested )
  • userId (string) - the user ID of the requester (null/empty if not requested )
  • userProfileImageUrl (string) - the profile picture URL of the requester (null/empty if not requested )

Song Continued

Fires when a song gets resumed.

Available variables:

  • trackId (string) - the ID of the track
  • trackName (string) - the name of the song
  • artists (string) - the artist(s) of the song
  • coverImageURL (string) - the image URL of the cover art
  • isPlaying (bool) - indicator whether the song is playing when it gets resumed
  • progressMs (int) - the song's progress in milliseconds
  • durationMs (int) - the song's total duration in milliseconds
  • progressTimeFormatted (string) - the song's progress time in a mm:ss format
  • durationTimeFormatted (string) - the song's total duration in a mm:ss format

Song Paused

Fires when a song gets paused.

Available variables:

  • trackId (string) - the ID of the track
  • trackName (string) - the name of the song
  • artists (string) - the artist(s) of the song
  • coverImageURL (string) - the image URL of the cover art
  • isPlaying (bool) - indicator whether the song is playing (typically false when paused)
  • progressMs (int) - the song's progress in milliseconds
  • durationMs (int) - the song's total duration in milliseconds
  • progressTimeFormatted (string) - the song's progress time in a mm:ss format
  • durationTimeFormatted (string) - the song's total duration in a mm:ss format



FAQ & EXAMPLES

Can I disable certain chat responses?

Yes. In the Settings UI in the Chat Responses tab, you can enter a single hyphen - as the message and it'll then not post it to chat.

Do my settings persist across updates?

Yes, they're saved as global variables.

Can I make it work without Spotify Premium?

Most API calls rely on Spotify Premium. So while some things like pausing and unpausing MIGHT work, the actual cool stuff won't. So no, you need Spotify Premium.

Can I request songs via YouTube links?

Yes, you can. However, the extension will just pull the video title and use that as the search query.

Can I run the HTML locally?

Yes, open it in the browser, rightclick into it and click Save As and choose HTML Only. You can then use that as a browser source file. You want to add URL params, uncheck Local File and instead type file:///C:/YourFilePath/Overlay.html manually in there. If you run it locally, you won't automatically receive any updates I make to the overlay though, so you'd have to redownload it on updates.

CHANGELOG
Date Changes Version
February 09, 2025 Added 'Default Device' to the Settings UI. The player now uses a default device for its requests (can be changed with the command as well). Default Devices can now also wake from sleep in case they were inactive. 1.0.2
February 07, 2025 Just a widget update: Added automatic title and artist scrolling when their text exceed length -
February 05, 2025 Added catch in case settings are being deleted mid process 1.0.1
February 02, 2025 Release 1.0.0