Git Product home page Git Product logo

lastfm-overlay's Introduction

Last.fm / ListenBrainz Overlay for OBS

This is how the overlay looks in OBS.

This overlay allows you to show what song you're currently listening to on your stream. It's made especially for software like OBS to add functionality to your stream. This solution is much more elegant than telling your viewers the name of every song you're listening to or requiring your users to call a bot. It's also really flexible if you know a bit of CSS and HTML.

To work out what you're playing from pretty much anywhere, you just need an account with either last.fm (recommended) or ListenBrainz. You can make the widget update every x seconds to get realtime updates.

This is an updated, more flexible version of Mitch Canter's widget.

Setting Up The Overlay

Prerequisites for setting up the overlay:

  • a last.fm or ListenBrainz account
  • (if you're using last.fm) an API key. Get your API key once you've signed up for an account here.
  • your streaming service(s) connected to last.fm or ListenBrainz. There's instructions available here for last.fm.
  1. Download the project and host it on a web server or put it somewhere on your computer.
  2. Rename index.example.html to index.html. There are 4 settings in this file that you will need to be aware of to make this overlay work for you:
Variable Name Possible Values Meaning
api Text (Optional, required for last.fm) Your last.fm API key
username Text Your last.fm or ListenBrainz username
time Number How many seconds to wait before checking what's playing
is_lastfm true/false Whether to use last.fm or ListenBrainz
  1. In OBS, add a new 'browser' source. Check the box that says 'Local File' if you are hosting the file on your machine. Enter the file location in the 'URL' box, and set the Width to 250, Height to 90. Feel free to tweak this as necessary.
  2. Open your music app of choice and start playing. Everything should begin displaying on the first song change.

Notes

  • ListenBrainz can be slow to update, or not update at all. Last.fm is highly recommended.
  • Apps that don't share listening status between devices like Tidal may show music from the wrong device. Spotify works best with this.

Roadmap

  • multiple view options (vertical, with album cover)
  • responsive version
  • add images to setup section

Disclaimers

This product is not endorsed, affiliated, made or supported by The MetaBrainz Foundation, Last.fm or CBS Interactive. It's built on public APIs. You agree that you are liable for your use of the Last.fm API, not the developers of this product.

Powered by audioscrobbler

lastfm-overlay's People

Contributors

dylmye avatar thatmitchcanter avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.