Share your repls and programming experiences

← Back to all posts
Spotter - Spotify Controller
h
DillonB07

Spotter

Welcome to Spotter!

I really need a better name. Please create an issue on GitHub or post a comment on Replit if you have an idea of a better one.

Spotter is a website that you can connect to Spotify to control your music with an extremely simple, easy-to-use interface.

Spotter lets you generate a room that you can invite other people to to control your music with you. With a voting system for skipping and rewinding songs, you could use it at a party so that the guests can control the music!

Features

  • View song, and album cover
  • View timeline for song
  • Voting system for skipping to previous song, and next song Can be set to one if you want it to be clicked once.
  • Shuffle Button
  • Repeat button Goes through the 3 states of repeating like in Spotify app
  • Pause/Play button
  • Settings page where you can control the amount of votes, and whether guests can pause
  • Fully functioning Room Join/Create system
  • Changing gradient background
  • Auto refreshing Spotify Tokens
  • Backwards-Compatability for browsers with older versions of JavaScript

Creating a room

Create Room

When you create a room, you can choose the following settins:

  • Guest can pause
  • Votes to previous/skip

You'll also be asked to allow Spotter to have the following permissions:
user-read-playback-state, user-modify-playback-state and user-read-currently-playing
This will allow Spotter to read the currently playing song, see whether it's paused/playing/repeating/shuffled and let Spotter control the song.

Because we use Spotify's Web API, if you have a Free account, you will not be able to control the playback of the song. You and your guests will only be able to see what's playing, and the timeline for the song.

Once accepted, you will be redirected back to Spotter, and you should see the music player.

There will be a Settings buton at the bottom of the page, as well as a Leave Room button. The Settings button will allow you to modify whether guests can pause, and the votes to change song. You can also share the code at the top of the page with the people you would like to access the music player.

Joining a room

Join Room

To join a room, you don't need anything except the room code, and access to the website of course.

Just enter the room code on the room join page, and you'll be in the room!

Note: It is important to go through the room join page instead of going directly to room/<RoomCode>, because of backend code that needs to run.

If you are able to pause, you'll see a pause button. If you can't pause, you won't see the pause button.

Pressing the Skip or Previous buttons will add 1 vote to that button. When the amount of votes is reached, the song will change.

You cannot use the Shuffle or Repeat buttons. These are for the host only to use, but let the guests see the current state.

Repl: https://replit.com/@DillonB07/Spotter
GitHub: https://github.com/dbarnes18/Spotter
Website: https://spotter.dillonb07.repl.co

I hope that you enjoy this project! I plan on working on this quite a bit adding more features. If you have any suggestions, create an Issue on GitHub, or write something in the comments here on ReplTalk.

Voters
JakeHu2020
cloudlesstv
ruiwenge2
MarcusWeinberger
maxina
OldWizard209
Bunnytoes
ch1ck3n
DillonB07
Comments
hotnewtop
ch1ck3n

wow i can see that you worked really hard on this

DillonB07

@ch1ck3n Been working on it for about a week or two.

MarcusWeinberger

This is super cool and I like the design!

DillonB07

@MarcusWeinberger Thanks! The frontend is built using React and Material-UI. I like it for my first time using them.

MarcusWeinberger

@DillonB07 ooh, I've been wanting to try make something with that, I love material design

112596

For some reason I can not get it to work...

DillonB07

@112596 There are occasionally a few issues. Make sure you have Spotify open and a song playing. Make sure you're definitely connected to Spotify. If that doesn't work, right click, open Developer Tools(Inspect) and empty cache and hard reload(right click reload).

112596

@DillonB07 Got it!

DillonB07

@112596 Nice! What was the issue?

112596

@DillonB07 Clear the cache seemed to fix it

JakeHu2020

Noice

ruiwenge2

cool!

Bunnytoes

this is cool