Audio Sync

AudioSync Logo
Homepage
Sample Run!
Sample Final List!

Inspiration

Fans of music may be interested in knowing what songs are playing in the concert for a specific site, and the website Setlist.fm allows for users to upload setlist of artist concerts for fans to view, however, it has a Wikipedia-like editing system so the information there may not always be accurate. During the hackathon we transformed our original idea to be more of a service to inform people about the songs that they hear that they may not know, and more information about them like the artist and album. AudioSync aims to remedy this by syncing whatever audio is being heard to the app to provide a more accurate listening experience!

What it does

AudioSync is a refined web application that engages device microphones to elegantly capture ambient audio. When a recognizable tune graces the air, it swiftly identifies the melody using the adept Shazam API, and graciously displays it on the site's frontend view. As the musical journey unfolds, multiple songs find their way to a meticulously crafted table on the website. The crescendo of this harmonious experience manifests as personalized Spotify links, created seamlessly from the symphony of songs that were captured and recognized, orchestrating a melodious bridge between the physical and digital realms of music.

How we built it

The frontend was built using React.js and the backend was built using Python, Flask, the Shazam API, and the Spotify API. The logo was made in FireAlpaca and designs were made in Figma.

Challenges we ran into

Many git merge conflicts
Downloading libraries (python, html) (solved with a requirements.txt file)
Shazam API was a challenge to work with -MacOS vs Windows

Accomplishments that we're proud of

Getting the app to recognize songs from the microphone with a high success rate
Integrating the Spotify API to get album covers and make playlists -Making a Python back end work with a React.js front end.

What we learned

Python and Flask
How to integrate the Shazam and Spotify API
Resolving git merge conflicts
Creating React components
Debugging strategies

What's next for AudioSync

Saving song lists as PDFs
Mobile app?
Additional features
User authentication
Social media incorporation (Sharing)
Usability
Chrome extension?

Built With

flask
javascript
pydub
python
react
shazam
spotify
spotipy

Submitted to

Knight Hacks VI

Created by

I played a role in the project by primarily focusing on the backend development. My key accomplishments include the successful implementation of the Shazam API and seamlessly connecting it to the audio input, resulting the shazam API to function properly.

ahmadshaqqou Shaqqou
I worked on the backend, it was my first hackathon and my first time using Flask to combine a Python back end with a React.js front end! I made the original Python scripts for gathering audio files (createAudio.py) and running the output .wav files through the Shazam and Spotipy API's, returning a song link as well as cover art (generatePlaylist.py).

Anthony Castillo
I created the logo, designed the frontend in Figma, helped with frontend components and assisted with testing the application.

Melanie Ehrlich
I developed the original inspiration for the project, implemented the front-end design and logic, and constructed the connection between the python back-end and the react front-end.

Noah Seligson