Skip to content

Latest commit

 

History

History
48 lines (32 loc) · 3.39 KB

README.md

File metadata and controls

48 lines (32 loc) · 3.39 KB
Raw

Mix Master (Spotify)

Deployed at: https://mix-master.netlify.app/.

This is basic project intended to help users make better playlists and mixes, by looking at key and tempo data of a chosen Spotify playlist or album. A good mix transitions between tracks that are similar in key and tempo (based on Circle of Fifths), this site helps you do this. A guide for using the site can be found in the 'About' section.

  • Can be used as a companion app for dj software, to help you make better transitions between tracks.
  • Can can be used to help find samples for production, given that you know what tempo/key you want to work in.
  • Can be used as a companion site for getting quick key data, to aid jamming with whatever album/playlist you want (because knowing what key you're in is goes a long way).
  • Can be used to find similar tracks by using Spotifys' song radio / get track recommendations API endpoint; see here for more info.

Note: that all data comes from Spotify, and will only be as accurate as Spotify's analysis algorithms'.
Note#2: (for music nerds) Spotify only provides estimations for major/minor, and as such at this point will not tell you whether the key is in a different Mode to those.

It is built with React, and styled using SCSS/Material-UI. Requests are done using axios, and Spotify-auth is done completely client-side using the Client Credentials Authorisation Flow. This means none of your personal data ever actually leaves your browser.

Features

  • Choose any playlist that you have created or followed, and
  • Sort by key, tempo, or tempo and key.
  • Display key in standard or Camelot, which is a system that lets you understand keys that are close together without having to know musical theory (the site explains how to do this).
  • Search for albums, tracks, and public playlists, and see key/tempo data for each.
  • Separates playlists into created and followed.
  • Get recommendations for any track that will also try to match key.
  • Hover over the tooltip to see more track-related info. Note that the genres provided by Spotify are artist specific rather than track.

Setup

To build your own setup, run yarn install after cloning, and create a copy of .env.base as .env file in the root directory (or set it in your local environment) with your own Spotify ClientID and a callback URI.


Your Spotify ClientID can be found by registering your app.

If interested, other Spotify-based sites that I've written are:

  • Spotify Metadata, a site for exploring your listening habits – Github, deployed.
  • Seed Playlists, a site for generating your own custom daily mixes/playlists – Github, deployed.

Otherwise,
Happy Coding and Stay Safe.