Spotify Track Filter

Built website to search Spotify for a keyword or specific album/playlist then filter all the tracks returned based on their musical properties to create a more specific playlist of songs.

Technologies

  • HTML website
  • CSS styling and animations
  • jQuery and vanilla JavaScript
  • AJAX requests to pull external data from Spotify API
  • Document Object Model (DOM) manipulation
  • Event listeners and handlers


spotify

Landing Page

Displays the instructions for how to use the site

spotify

Search Results

Users can search from anywhere on the page from the navigation bar and see the search results here.

spotify

Filter Settings

Displayed search results can be filtered using any number of options and values desired. Each parameter can be hovered over to display an explanation of its meaning and a graph of the standard distribution of values.

spotify

Filter Results

The filtered results are displayed below the filter settings once the run filters button is clicked

spotify

Audio Analysis

Each song from either the search results or filtered results can be clicked to display an audio analysis of its values at the bottom of the page.