https://github.com/santosfrancisco/spotify-widget

A widget that shows what is currently playing on your spotify.
https://github.com/santosfrancisco/spotify-widget

javascript nextjs now obs-studio playing spotify spotify-web-api streaming twitch widget

Last synced: 12 days ago
JSON representation

A widget that shows what is currently playing on your spotify.

• Host: GitHub
• URL: https://github.com/santosfrancisco/spotify-widget
• Owner: santosfrancisco
• Created: 2020-07-10T04:47:06.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T20:16:05.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T13:33:11.805Z (28 days ago)
• Topics: javascript, nextjs, now, obs-studio, playing, spotify, spotify-web-api, streaming, twitch, widget
• Language: JavaScript
• Homepage: https://spotify-widget.vercel.app
• Size: 524 KB
• Stars: 30
• Watchers: 3
• Forks: 5
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



# Spotify Current Song Widget



  



[https://spotify-widget.vercel.app/](https://spotify-widget.vercel.app/)

A widget that shows what is currently playing on your spotify. It was built to be used with OBS Studio or Streamlabs OBS (or another broadcast application that accepts url sources). This way, whoever is watching your live, knows what music is playing.

## Development

### Requisites

- NodeJS

- An spotify app

- mongodb database

First, you should have a spotify app. You can create one [here](https://developer.spotify.com/dashboard/).

Second, you should have a mongodb database. I'm recommend you use [MongoDB Atlas](https://cloud.mongodb.com/).

After this, fill all enviroment variables in the `.env`

```

  DB_CONNECTION_STRING=your-mongodb-connection-string-with-user-and-pass

  ClientID=your-spotify-ClientID

  ClientSecret=your-spotify-ClientSecret

  BASE_URL=http://your-base-url/

```

Then, run the command below in your terminal

```bash

  yarn dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

## TODO

- Tests

## Contributions

PR's are welcome!