Currently Playing on Spotify

The currently playing widget shows the currently playing song on your spotify account. To work, you'll need to connect StreamUtils with your spotify account. If you are not logged in via spotify already, or if you did not connect your spotify account yet, the currently palying page will ask you to connect your spotify account. Once you've given StreamUtils access to your spotify account, you will be able to configure your currently playing widget.

Layout of your currently playing widget

This field allows you to select a predefined layout

Link

This section offers a convenient way to copy your currently playing widget link, so you can paste it in your favourite streaming/recording software. It also provides a preview of your timer which changes as you change values in the form above it.

The way you do this depends on the recording software you are using. We'll explain how to do it in OBS Studio (Tweet at @DoctorHoen if you can provide info on how you made it work in other streaming software, we'll include your input here.)

In OBS Studio, do the following:

• In the sources panel, add a browser source (right click the panel, select "Add", then "Browser")
• In the dialog that opens, select "Create new", give it a name as you like and click "OK"
• In this dialog, enter the following information:
  • as "URL", paste the url you find in the "Your link" field.
  • For "Width" and "Height" enter the values you find in the layout table above.
  • Leave all other fields and options as they are
  • Remove all content in the "Custom CSS" field
  • Click "OK"
• You should now see your currently playing music in the browser source (make sure music is actually playing on your spotify)

Instead of using the predifined layouts, you can also create your own if you know your way around CSS. If you do, set the layout parameter to none and put your own CSS in the "Custom CSS" field. As an example, this is the CSS we used to make the material layout:

Material Layout (minimalistic design)

/* Material Layout */
@import url("https://fonts.googleapis.com/css?family=Roboto");

body {
  background: rgba(0, 0, 0, 0);
  font-family: 'Roboto';
  margin: 0px auto;
  overflow: hidden;
}

.nowplaying{
  margin: 0;
  width: 500px;
  color: white;
  text-align: center;
  text-shadow: 1px 1px 5px rgba(0,0,0,.3);
}

div.text > p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.art > img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 0 3px 2px rgba(0,0,0,0.25);

}

.display {
  width: 500px;
  height: 75px;
  background: white;
  position: relative;
  color: black;
  text-align: left;
  text-shadow: none;
}

.art {
  position: absolute;
  left: 0;
  width: 15%;
  height: 100%;
  box-shadow: 3px 0 3px 0 rgba(0,0,0,.4);
}

.coverart {
  visibility: hidden;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  left: 90px;
  overflow: hidden;
  margin: auto 0 auto 0;
  height: 100%;
  width: 80%;
}

.artist {
  order: 2;
}

.album {
  order: 3;
}

.artist,
.album {
  font-size: 13px;
  font-weight: 100;
  color: #999;
}

.track {
  order: 1;
  color: black;
  font-size: 24px;
  font-weight: 100;
  width: 100%;
}

Tweet at @DoctorHoen if you came up with a cool layout, we'll be happy to include it here.