Vinyl Record Music Display Widget

Thanks for downloading our Vinyl Record Music Display Widget!

Here you will find instructions on how to set everything up and an in-depth description of its possibilities.

⚠️ Take note: This widget is hosted on StreamElements — make sure you have a StreamElements account before setting it up!

Before We Begin

Before diving into using your widget, there are a few essentials you'll need to prepare:

  1. Last.fm Account: You'll need an account on Last.fm to track the songs you play.
  2. Last.fm API Key: This is a unique code that allows the widget to access and display your music data.
  3. (Optional) Web Scrobbler Browser Extension: If you stream music from platforms other than Spotify, this extension will enable your widget to track and display songs played on virtually any online music service.

Don’t worry, both last.fm and web scrobbler extension are completely free to use. Also, this process may feel a bit complicated at first, but you need to do it only once and, most importantly, we’ll provide detailed step-by-step instructions on every aspect of the setup process in this guide below.


Setting up your Last.FM Account

  1. Visit the last.fm website.
  2. Click on the Sign-up button in the top right corner.
  3. Create an account and verify your email address—this is crucial!
  4. Connect your preferred music streaming service to your last.fm account by following this link.⚠️ Please Note that Spotify can be connected directly to last.fm, but other services may require the browser extension. We’ll cover all the steps of how to set it up below
  5. You Last.FM account is now set up!

Getting your API Key and Username

  1. Once your account is set up, go to your profile by clicking on your profile picture at the top right and select View Profile.

  2. Your username will be displayed at the top—make a note of it.

  3. Now go to the Create API account page

  4. Fill in the form with the required information, ignoring the Callback URL and Application homepage fields. Here’s an example of how to fill it out:

  5. After submitting the form, you should see your API key. Copy and save it.

  6. That’s it, now you obtained both your last.fm username and the API key

Сonnecting Your Spotify Account

  1. Go to the Track My Music page on last.fm and scroll down to the Spotify section

  2. Click the “Connect” button

  3. If you are already logged into your Spotify account on your PC, you'll receive a pop-up confirming the successful setup. If not, just log in with your Spotify credentials


Setting up a Web Scrobbler Browser Extension

While this step is optional if you’re using Spotify, we strongly advice setting this extension up because it will allow you to show music from a lot of other streaming platforms and sites - soundcloud, youtube, bandcamp and everything you can imagine. This extension is completely free to use and works with most major web browsers and its setup takes 1-2 minutes max. Let’s dive in!

  1. Go to the Web Scrobbler website and click on the icon of your browser to start the download.
  2. Install the extension
  3. Once installed, you’ll see a pop-up window. Click the cogwheel icon to open settings.
  4. Go to the Accounts tab and press the Sign in button under Last.fm.
  5. Log in to your last.fm account and click “Yes, allow access” to connect your account.

StreamElements Widget Setup

  1. Log in to StreamElements with your Youtube or Twitch account
  2. Go to the “2. Widget” folder in the package you’ve downloaded
  3. Pick the file that corresponds to your streaming platform (Twitch or YouTube) and double-click to install it.
  4. Now click the Edit button on the widget you just installed.
  5. Select the Album Music Display layer and click settings.
  6. Go to the Technical settings.
  7. Paste the API Key and the Last.fm Username into the corresponding fields.
  8. The red warning messages should now have disappeared.

  9. Test the widget by playing some music on your connected service and watch the music appear.

    Note that updates occur every 10 seconds to minimize load on the Last.FM website.

  10. Click “Save” in the top right corner
  11. Your widget should now be up and running!

Customization Options

Design

Name Description
Enable Rotation Turn the rotation of the album art on or off
Font Name Choose from a variety of Google Fonts for your text.
Normal Font Weight Set the thickness of the regular text style.
Bold Font Weight Set the thickness of the bold text style.
Font Size Adjust the text size, which automatically adapts to fit longer song titles.
Font Color Pick the color for your text.
Box Color Choose the color for the background of your text box.
Box Height Adjust the height of your text box.
Box Corner Roundness Modify how rounded the corners of the text box are.
Box Offset Adjust the text box's vertical position as a percentage from the top.
Album Cover Size Set the size of the album cover art displayed.

Behaviour

Name Description
Mode Choose between always displaying the song info (Continuous) or only showing it when the song changes (Pop-up).
Pop Up Time Set how long the pop-up displaying the song info should last.
Text Template Template for the displayed text, allows {{song}} and {{artist}} variables as well as basic markdown for bold text

Technical

Name Description
API Key Your personal http://last.fm API key
LastFM Username Your http://last.fm username

Adding the Widget to Your Streaming Software

OBS Studio

  1. Copy the URL of your Widget from the StreamElements dashboard
  2. Open OBS Studio
  3. Click “Add Source” (plus icon) in the Sources section.
  4. Add a “Browser” source, give it a name, and press “Ok”
  5. Paste the URL you’ve copied
  6. Set the width to 1920 and the height to 1080
  7. Press “Ok” and we’re done!

Streamlabs Desktop

  1. Copy the URL of your Widget from the StreamElements dashboard
  2. Open Streamlabs Desktop
  3. Click “Add a new Source” (plus icon) in the Sources section.
  4. Choose “Browser Source”, give it a name, and press “Add Source”.
  5. Paste the URL you’ve copied previously
  6. Set the width to 1920 and the height to 1080
  7. Now press “Close” and that’s it! Your widget is ready to use!