If you are a beginner for HTML and CSS stuffs then lets design a web page like this,
Requirements:
- A .html file, it contains all the elements e.g. heading, paragraphs, images references etc. which you want to display on your web page.
- A .css file, it is the "stylesheet" whose job is to style your web pages like the way you want to see it.
- A .js file, contains the main function handlers which allows web browser to be interactive.
- A "Image" folder to store the background image of the web page. You can add as many images in this folder for use.
Let's get started ....
- First create a new folder "Music Player" and open it from Visual Studio Code Editor.
- Add a new file "play_music.html". See image below.
Type html:5 to avoid writing head. You can avoid typing much in html5 so here is some more shortcuts for you :)
docs.emmet.io/cheat-sheet. Don't forget to save your file every time !
Change the tittle of "head" from "Document" to "Music Player". This will be your tab name. Now let's write the body of html. The < body > tag defines documents body and inside it type h1and hit enter.
Write the heading you want to use. Similarly make a paragraph and a button element.
Open your .html file using chrome and find like this...
Time to add some style to your web page. Create a new file "style.css". Add separate effects for background color/color of text for "body", "paragraph" and "button". Save the .css file.
Still these are not applied to our web page ! Reason is we have to link our style.css in our .html file. Go to play_music.html and add a link in "head" area.
Type link-> enter -> write href="style.css" -> Save .html
Now the effects are applied !
Lets' move on to play the MUSIC, which we gonna do with a JavaScript.
The idea is that after clicking button "PlayMusic" in Webpage, the music starts to play. So we need the .mp3 file as well. Create a new file named "play_music.js" and save your downloaded music, say "Classical.mp3" on same folder.
Before you move on to JavaScript, add few things in .html file
- Make a "button id" in .html file.
id="play". This is how we call button element from "play" ID in JavaScript file. - Add "audio" element to source your audio file which is here Classical.mp3. This has element ID as well for the same reason above.
- Add newly created JavaScript (play_music.js) as "script" element. Should look like this, before we move to write play_music.js.
The ideas in JavaScript are
- Fetch the audio and button elements by element ID
- Add a event handler (called as Listener too) for the button clicking action.
Fetch element in JavaScript:
const audio = document.getElementById('audio');, "document" is an object representing your web page in JavaScript file. If you want to access or change any element on web page/html page, use "document" object.
audio is an object for HTML audio element. We can "play()" or "pause()" on it. Reference to this for more w3schools.com/jsref/dom_obj_audio.asp
Add a listener: Listener is a function which is called when a particular event happens, here event is button click. Our listener should play/pause song at every button click event.
const btn = document.getElementById('play'); // Fetching button object from webpage
// Add a listener on even = 'click'. btn.addEventListener('click', function() { // Listener task audio.play(); });
If you save this file and as play_music.js is already linked in play_music.html. The audio music in play_music.html i.e. Classical.mp3 will start playing.
Note: Put your "script" element after you define the "button" and "audio" elements inside body in .html else play_music.js can not load these elements. Always better practice to put "script" at the end in .html.
The final addition is add "pause" feature. We can have a global variable "isplaying" to set 1 when music starts playing and 0 when it is paused. This way we can play or pause music after clicking button in webpage.
This is the final files we made for far ! And you can click button "PlayMusic" to play or pause in webpage.
I hope this helps you to start your first web page in html, css, JavaScript. You can come up with cool ideas to use them as your own.
All the best !!