https://github.com/gediont/melodify-rc
Hear Your Sites
https://github.com/gediont/melodify-rc
for-fun hacks javascript melodic music nodejs puppeteer react scraper silly
Last synced: 2 months ago
JSON representation
Hear Your Sites
- Host: GitHub
- URL: https://github.com/gediont/melodify-rc
- Owner: GedionT
- Created: 2020-08-09T09:03:30.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-08-15T02:30:01.000Z (almost 6 years ago)
- Last Synced: 2025-03-05T16:51:21.567Z (over 1 year ago)
- Topics: for-fun, hacks, javascript, melodic, music, nodejs, puppeteer, react, scraper, silly
- Language: JavaScript
- Size: 1.27 MB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Melodify
- www.melodify.tech
- [Hear your sites](melodi-fy.web.app)
Ever wondered what a website content might sound like?
Melodify was a weekend project built to do just that. Enter a URL of your
choosing and Melodify will scrape the website and play you the sound along
with a music sheet.
# Design Concept
The UI is a simplistic design with a minimal interface. It was initally designed on
Figma which can be found on this link here: [Initial Design](https://www.figma.com/file/K1mzN5JjbL7pdGzwYnuzIh/Melodify?node-id=6%3A6)
# Inspiration
Audio logic inspiration [JS Piano](https://www.freecodecamp.org/news/javascript-piano-keyboard/).
Since the logic used by the website above uses key-presses to make sounds synthetically, we customized
the logic on the playKeyboard.js file to fit our needs with several array manipulation.
# Frontend
Frontend is made using HTML, CSS, Angular (now React), and Bootstrap.
The sound is generated mathematically on the client machine by using math functions
after a scraped content is received from the backend scrapper
# Backend
Backend runs on Node.js deployed on Heroku.
To run this project on your local machine
open terminal:
git clone https://www.github.com/GedionT/Melodify-Rc.git
cd Melodify
npm install
npm start