Musify
Inspired by people who hates surfing through internet to find a song and just want shit to get done very fast.
Musify allows users to instantly download music as mp3.This webapp mainly consists of a simple search box where you can type in the name of any song of your choice. As a result of the search it will display the downloads buttons of the songs which is related to the keyword you have typed into the search box. When you click on the download button,the downloading starts instantly in your browser.
Features in one glance
- Minimal mp3 song downloader.
- Search any song of your choice.
- Get the direct download buttons.
- 3 types of download buttons:-
- For 320Kbps download
- For 256Kbps download
- For 128Kbps download
- Download start at the instant you click the button
How I made it ?
Making this Website is very simple except the part where you have to use the Jquery to access the Youtube API. Oh ! I broke the suspense right ? Yes, I used Youtube API to access the songs from the Youtube database.
Basically, I am sending a search request to Youtube using the keyword which we type into the search box of the website and in return I will recieve the results of the search in Json format. Afterwards,I will use Jquery to extract video ID from the results sent by the Youtube API in return. Wait a min ! I recieved only the video ID ! What am I going to do with it ? :confused:.
Well! Don’t worry ! Here comes the most unique part in creating this website, I am using the help of a Youtube video to MP3 converter website. This website provides a feature to generate the MP3 download button of any youtube video using it’s video ID.
The code for the button looks like this :
<iframe src='//api.listenvid.com/?default/<your_videoid>/mp3/D1684E' width='100%' height='100px' scrolling='no' style='border:none;'> So by now I have told you how I am using the video ID generated via the Youtube API and the download button’s from a Youtube video to MP3 converter website. I guess you got the idea by now. Yes, I am using this video ID generated by the Youtube API to generate the download buttons of the song and is displayed as the result to the user. Even here I am using Jquery to transfer the video ID to the button link. So what I want to convey is that Jquery plays the most important role in the development of this website.Starting with sending the API request to transferring the video ID Jquery does the job for you.
Next, coming to the design part of the website. I have made this website as minimal as possible. I haven’t used any framework other than Jquery for creating this website. I used only CSS and Jquery for creating this website and for the design part of the website I used only CSS. The website just has a search box and a search button .And when the user search, The results are displayed below the search box. You can see the screenshots below in the screenshots section.
So that’s it I have done just these things to create this cool website. I know this explanation is not enough to understand how actually this website works so I have added the github repository link at the end of the article.
PS :- I forgot to add this point, you can download this website into your local system and then use it but for that you have to run this website on a server like Apache server. Otherwise the Jquery will not be able to handle the API request and hence the searching procedure cannot be completed by Jquery which inturn will display nothing if you simply open this website.
How to run
- Click on the following link where it is hosted : Goto site
- To run locally : Simply run this website on a server like apache.
Screeenshots
Contributions
If you feel like you want to see more features please do add an issue. This project is opensource you can also work on it by sending a pull request.