Skip to content

Latest commit

 

History

31 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 

Repository files navigation

Spotify Visualizer

A Web Application to visualize the spotify currently playing track on a projector (or some big screen), without requiring you to change which spotify device is playing.

image image

Features

  • QRCode spotify authentication (no need to mouse or keyboard);
  • No "stealing" your spotify connect. (running this won't interact with or affect your spotify playback in anyway);
  • Persisted UI layout;
  • Synched realtime UI layout editing;
  • Dragabble, rotatable and resizable UI components;

authentication.mp4


Requirements

  • Spotify developer account
  • Node 18

Setup

  1. Access your spotify developer account dashboard, create a new app with Web Api permissions (see print below)

    image

    Then on client/ folder: edit .env file and fill the spotify Client ID and Client Secret variables on it

    VITE_SPOTIFY_CLIENT_ID="client id goes here"
    VITE_SPOTIFY_CLIENT_SECRET="client secret goes here"

    (you can get those values at spotify app settings):

  2. Setup a google API key: Setting up API keys

    Then on server/ folder: edit its .env file and insert your google API key:

     YT_SEARCH_API_KEY="Api KEY goes here"
  3. For both server/ and client/ folders:

    • run npm install

Running

Enter server/ folder, build the repo and run it:

cd server
npm run build
npm run prod

open https://localhost:3000/

Developing and Debugging

For debugging and local development:

cd server
npm run dev

open https://localhost:3000/ or https://localhost:3000/settings

FAQ

I want to change the authenticated spotify account Logout on https://localhost:3000/settings, and you'll be redirected to authenticate again

I've openned the website, but the sound bars visualizer wont appear

Most modern browsers require a initial user interaction to access audio nodes, to solve this you can do one of these:

  • change the Autoplay policy (at chrome://flags/#autoplay-policy ) to 'No user gesture is required'
  • press f5 and quicly click anywhere on the website

TODO:

  • fixed resolution: pick a single canvas resolution, thus solving the problem of editing the layout in different screens with different resolutions
  • Authentication quality of life
    • refresh QR code every 45 seconds, allowing for a new attempt in case of broken tokens during auth process
    • Add link below QR code
    • Add a friendly way to "logout" from connected spotify account
  • Styling:
    • Allow to pick background between soundwaves and static album color
    • add playback progress bar
  • Migrate architecture, having server and client more integrated and performant
    • Migrate state logic and realtime logic server to SpacetimeDB
    • Migrate to solid-start fullstack framework for UI and auth management

About

Spotify "currently playing" visualizer, personalizable UI focused on projectors and bigScreens

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages