The best way to understand this app is to visit it here
Technologies Used: Flask, Python, HTML , CSS, Javascript, Spotify's API & Git
Introduction: This app aims to reduce the time consuming process DJ's go through in finding songs for their library. The app uses Spotify's extensive API with the python adapted spotipy package for simplicity. Using the Spotify API, we can access their complex recommendation feature which uses machine learning algorithms to suggest tracks based on a given seed track and user-defined parameters. This takes the standard spotify recommendation feature embedded in their app and extends its functionality by allowing DJ's to add constraints like BPM and key requirements.
Technology Overview: For the backend, Python is used to communicate to the Spotify API and the flask web framework is used to create the web app. For the front-end, I use mainly HTML & CSS with some Javascript. The website is hosted for free on PythonAnywhere.
The app works as follows:
- Ask user for a search query, any song that they would like to find similar tracks for - a Flask form is used
- Use this search query to search the entire Spotify library to retrieve information about the user specified track
- Ask the user for requirements when searching for similar tracks, these include BPM, key & popularity - another Flask form is used
- Serves the user the similar tracks with the specified requirements
Spotify's API: I used two separate scripts, one for track analysis and another for track recommendations. The goal of the first script is to find the audio characteristics of the user specified track, these characteristics include BPM, key, popularity & energy. This track is now our seed track and its characteristics act as a baseline for recommendations. The second script collects the recommendations of that track with the user defined parameters.
Flask: I use the Flask web framework to create the app. The code for the flask app routes is here and the code for the forms is here. Flask handles the user inputs POST like the search query and recommendation parameters with forms which it then sends to the Python script accessing the API, it then serves the corresponding data GET.
The HTML code for each page can found here. I use a base template for repeatable HTML like the meta data & the nav-bar and then extend that template for each of my pages; home, song & set. Bootstrap is used alongside my own CSS which you can find here. I added some Javascript, [here], (https://github.com/gabriella-martin/DJ-Flask-App/blob/main/static/js/index.js) to create a more streamlined user experience.
For the playable Spotify embed I just used their embeds, this is by far one of the best developer tool spotify offers.