-
-
Song Display Webpage
-
Song Card Buttons
Inspiration
Have you ever wondered what it's like to have synesthesia, or wondered what your favorite music artist was feeling when they wrote your favorite song? Listening to music, it is hard to always picture what something might be talking about; we wanted to provide users with a way to feel music not just by sound, but by sight as well. With the popularity of the DALL-E model, we saw it as an opportunity to answer these questions. By providing a visual arts component to music, we redefine what listening to music means.
What it does
The app allows user to visualize their music. The user will pick a song from their Spotify account, then the app will pull up the song's transcript to find pictures that relate to song words
How we built it
We first started by evenly dividing the work but we stayed on a call to provide assistance to each other if any of us ran into a problem. After discussing and brainstorming our project idea we moved on the developing the backend, frontend, and web services. To do this we use VScode share live, to start the webservers portion using Javascript for functionality, CSS for style, and HTML for website building. We understood we need some way for the user to be prompted to the login button (that was on the next page) and we needed the user to understand what our app is doing so create a website to accomplish the task by using for and while loops. We continued to the front-end this is where we incorporated spotipy.api which is where we connect the user playlist to our code. We also built second options for users without a login-id by using python we were able to create this connection. After getting the playlist or song from the user we realized we needed to connect the front-end with the back-end. The back-end was developed using python and topic modeling to generate photograms from the user song's transcript
Challenges we ran into
The main challenge we ran into definitely had to do with using new technology, as well as trying to put all of it together. As a first-time hackathon team, we had to navigate the challenges of using different applications, for example, VSCode where we had problems displaying the website in the terminal, and we then had to work around it by coding in other IDE's and pasting it back into VSCOde so we could see what we were working on. Furthermore, it was challenging working with new technologies and frameworks such as Flask, the Spotify, and Spotipy API's for connecting and retrieval, as well as using the DALL-E model.
Accomplishments that we're proud of
At the end of this hackathon, as a team, we are proud to have a fully functioning backend and a website to display our code. We were able to wireframe the website structure as a team and create a consistent User Interface and User Experience (UI/UX) throughout our web application.
What we learned
During, this restrictive time period, we learned how to communicate our problems effectively. We also learn to apply our skills coding skills to the user interface.
What's next for Acoustic Art
For Acoustic Art, we hope to continue to work on this project and have a functioning web application, namely connecting our backend to our frontend, and then getting our Spotify authentication to work on the page. We are excited for the future of the project, and we can't wait to see what we come up with.
Log in or sign up for Devpost to join the conversation.