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.
- 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.
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.