Funky Music Display Widget

Thanks for downloading our Funky 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 Speech Bubble Animation Turn on or off the motion of the speech bubble.
Pattern Size Adjust the size of the background pattern.
Pattern Speed Control the speed of the background pattern's movement. A higher value means a slower animation.
Background Color Choose the color for the background.
Corner Roundness Set how rounded the corners should be.
Stroke Color Pick the color for the border.
Stroke Size Define the thickness of the border.
Bar Height Specify the height of the bar.

Text

Name Description
Google Font Choose any font from Google Fonts.
Font Song Weight Set the boldness of the song title text.
Song Text Color Select the color for the song title.
Song Text Size Adjust the size of the song title text.
Font Artist Weight Set the boldness of the artist's name text.
Artist Text Color Choose the color for the artist's name.
Artist Text Size Adjust the size of the artist's name text.
Font Message Weight Set the boldness of the text within the speech bubble.
Message Text Color Choose the color for the text in the speech bubble.
Message Text Size Adjust the size of the text in the speech bubble.

Behaviour

Name Description
Mode Choose between a pop-up display or a continuous display.
Pop Up Time Set the duration for which the pop-up should appear.

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!