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

Features

  • Spotify API Integration
  • Event listeners and handlers
  • jQuery & Document Object Model (DOM) manipulation
  • Asynchronous JavaScript with async and await

Example Images and Descriptions

trip_statistics
Landing Page

Displays the instructions for how to use the site

trip_statistics
Search Results

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

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

trip_statistics
Filter Results

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

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