It depends on what exactly your stream is about, but if you are like me (doing a programming/coding stream) you probably want to include a “currently listening to” information somewhere in your stream GFX overlay, or you at least though about it. In this article I want to give a quick overview on how I solved this little challenge for my own streaming setup.

What I assume you already know

  • Basic understanding of NodeJS (Javascript)
  • Basic understanding of NPM (Node Package Manager) or similar
  • How to consume Web APIs
  • How to use OBS / Xsplit

What I used

  • NodeJS
  • Spotifiy Web API
  • OBS ( but works with XSplit as well )
  • Created & Tested for Windows but should work for other platforms as well

1. Create new NodeJS Project using NPM

I usually run this commands for quick/tryout projects

$ mkdir spotify-current-track
$ cd spotify-current-track
$ npm init -y

Hint: npm init -y the -y flag skips the questions during the npm initialization process of a new project. I am lazy.

2. Install needed dependencies / packages

$ npm install axios dotenv express passport passport-spotify
  • axios : to consume Spotify’s Web API
  • dotenv : to be able to use .env files
  • express : to create a local webserver
  • passport & passport-spotify : to get spotify user access token