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.

Share this project:

Updates