Jukebox

This is a simple project which will guide the interested participants to build a Jukebox website by using simple HTML (Hyper Text Markup Language) tags.

Scope
This website will allow users to play the songs that are displayed on the website and so the whole project can also be called a Jukebox website project. The project is very simple and hence the code has been kept to bare minimum to keep the complexity levels low. It is simple piece of a working code that has been tested which can be enhanced for functionality. But actual trick lies in keeping things simple yet making them robust.

Website syntax
I have given the code below- Jukebox

Jukebox 

Code implementation
This code needs to be copied as such in a notepad file. This file then needs to be saved with a .htm extension. Then please use Chrome web browser to open the file and then click on a light yellow box that appears in the top right part of the screen and select the first option that will say ‘Always allow plug-ins on ….’.

This will enable Quick time player plug-ins to show the music box with controls that can be used to play or pause the music and adjust music volume. One very important thing that needs to be kept in mind while typing the song’s address in the html code is that only the .wav music files get played. So if songs need to played using this code then they all have to be in .wav format only. Video songs cannot be played by running this code. There are many online audio format converter websites that be used to convert the audio format of a song to .wav format. Some of the most commonly available websites are:
 * (1) Convert.Files - 'http://www.convertfiles.com/convert/audio/WMA-to-WAV.html'
 * (2) Online-Convert.com - 'https://audio.online-convert.com/convert-to-wav'
 * (3) Zamzar - 'http://www.zamzar.com/convert/mp3-to-wav/'

In the code above, the address of the song has been mentioned as an example. To get the address of the song you need to go to song and right click on it. After that, please choose the last option in the Content Menu called Properties. Copy the address given in front of the Location title and then paste it in front of 'embed src='. Then add a '\' and without leaving any space type the exact name of the song. At the end of the name, please add '.wav' without leaving any space.

About the Jukebox website
The whole website is built using HTML tags and it is defined as nothing but a big table. If we make the border option equal to 1 in the table tag then we will find that a border line will surround the whole site. Since it has only one webpage hence we can also call it as a ‘one webpage website’. To display each option in a table, first a row is started by using &lt;tr&gt;&lt;/tr&gt; tags and then the option is mentioned and displayed in the first cell of the row by using &lt;td&gt; &lt;/td&gt; tags immediately after the row tags. More songs can be uploaded by adding more rows (tr and td tags respectively). From a more technical point of view this website involves static binding and not dynamic binding. Static binding means that to make any changes a person will have to change the whole html code, save it and then re display the website while running the modified code. Since this is a simple project, static binding is a very feasible option but as the code keep becoming more and more complicated then dynamic binding become more feasible.

If you are interested in learning more about HTML tags then you can refer to the sites that I have mentioned below:
 * (1) HTML Dog - 'http://htmldog.com/guides/html/beginner/'
 * (2) w3schools.com - 'http://www.w3schools.com/html/'
 * (3) HTML.net - 'http://html.net/'

Look and feel of the website
Since the Quick time player box has got a white color hence to make the website look nice and presentable the background needs to be kept in either white or off white color. This color contrast is required as the code is simple and not much modification has been done to make the color of the Quick time player box adjustable. The background and the background color of the website can be changed and so it needs to be selected while keeping the matching color contrast in mind. Also, the display title for the first Quick time player box and the box itself has been put in two different rows. It is very much possible to adjust them in the same row by putting them in different cells but then the alignment may not be that presentable enough. Such small changes can be the make or break factor in making the website look nice and so some extra attention needs to given to them.

Applications
Such a project can have many applications:
 * (1)It can be used to build a better and more robust website which can be used on an organization’s intranet for the purpose of entertainment
 * (2)It can be used on a college intranet as a online college radio
 * (3)It can be used as an add-on to some other website and then add more value to the overall functionality of that website
 * (4)It can be used to upload and display song playlists that can be played by the interested visitors

Assessment
I have given a few questions below for those who are interested in getting their knowledge tested after going through the content:
 * (Q1) What are the key points that one needs to keep in mind while preparing this type of a website?
 * (Q2) How can you further improvise upon the robustness and utility value of this 'one webpage website'?
 * (Q3) Can you find more applications for this kind of a project?
 * (Q4) Did this project get you interested in learning more HTML? If yes, how much of it have you learnt?

Prepared and uploaded by Raman Kumar