-
-
Home Page
-
About Page
-
Figma Wireframe/Mockup
Inspiration
We wanted to make this hackathon a fun and enjoyable experience. Looking at the prizes we thought a silly and musical hack would suit our goals. We grabbed on to the idea: let’s read a website and translate the words into musical notes. As the saying goes "A Picture’s Worth a Thousand Words, but a Song’s Worth a Million", now what if we used the words and created a song. We were extremely curious to hear what websites' sounded like! Would Stack Overflow or our Facebook feeds produce some catchy jingles? It was for us to find out :)
What it does
Melodify receives a URL input from the user and runs a web scraper on the page. It retrieves a portion of the text from the website and translates it into musical notes. The first letter of a word dictates the note and the length of the word corresponds to the notes duration time. It features text tracking, different play options such as stopping, pausing, resuming, and even the functionality to change the instrument (piano, organ, acoustic, and edm).
How we built it
We built Melodify using AngularJS as a frontend server and Node.js as the backend server. The websites were scraped using Puppeteer Library, and the components were styled using Bootstrap. Special Thanks to Keith William Horwood (https://github.com/keithwhor/audiosynth) for creating a dynamic waveform audio synthesizer, which we used to generate audio. All the designs related to UI were mocked up in Figma.
Challenges we ran into
Some of the biggest challenges were binding words/letters to musical keys/notes, combining the front-end and back-end, hosting it, and setting up the end, and handling the play and pause functionality of the website.
Accomplishments that we're proud of
None of the team members were familiar with creating music, therefore we are very proud to make this project and learn about music. We made a working prototype and although this was also the first virtual hackathon for our team, we had great communication and were able to manage the huge timezone difference by putting it to our advantage so getting a hack completed when we are all working remotely is a big accomplishment we are proud of.
What we learned
We learned multiple things from this project. To list some: We learned how to create music, scrape websites, develop dynamic/responsive websites, and how to host a full-stack application.
What's next for Melodify
The next steps for Melodify are cleaning up the UI/UX and adding additional features. We would like to put this project on our own portfolios so we want to make this as presentable as possible. We hope to improve Melodify to create better sounds/generate better website music.
Log in or sign up for Devpost to join the conversation.