XSplit Gamecaster widget: Spotify Now Playing

widget.css

#container {
  width: 316px;
  height: 96px;
  display: flex;
  background: rgba(0,0,0,0.8);
  padding: 8px;
  border-radius: 4px;
}

#now-playing-album img {
  width: 80px;
  height: 80px;
}

#titles {
  font-family: 'Geomanist';
  padding: 10px;
  flex-grow: 1;
  color: white;
  overflow: hidden;
}

#now-playing-artists {
  font-weight: bold;
  padding-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

widget.htm

<div id="container">
  <div id="image">
    <div id="now-playing-album"></div>
  </div>
  <div id="titles">
    <div id="now-playing-artists"></div>
    <div id="now-playing-song"></div>
  </div>
</div>

widget.js

async function onInitialize(container) {
  let spotifyToken = customProps.spotifyToken.value;
  await loadScript('https://unpkg.com/[email protected]/src/spotify-web-api.js');
  var spotifyApi = new SpotifyWebApi();
  spotifyApi.setAccessToken(spotifyToken);
  spotifyApi.getMyCurrentPlayingTrack(null, function(err, data) {
    if (err) {
      console.error(err);
    }
    else {
      albumImage = data.item.album.images[0].url;
      artists = data.item.artists;
      song = data.item.name;
    }
  });
  if (albumImage) {
    document.getElementById('now-playing-album').innerHTML = `<img src="${albumImage}"/>`;
  }
  if (artists) {
    var artistArray = [];
    artists.forEach(function(element) {
      artistArray.push(element.name);
    });
    artistNames = artistArray.join(", ");
    document.getElementById('now-playing-artists').innerHTML = artistNames;
  }
  if (song) {
    document.getElementById('now-playing-song').innerHTML = song;
  }
}
renderWidget(onInitialize);
setInterval(onInitialize, 5000);

widget.json

{
	"generateToken": {
		"label": "Generate Token",
		"type": "text",
		"value": "https://developer.spotify.com/console/get-users-currently-playing-track"
	},
	"spotifyToken": {
		"label": "Spotify OAuth Token",
		"type": "text",
		"value": "[put your token here]"
	}
}