Create a Music Website Template using HTML, CSS & JavaScript

23 Aug, 2021
A music website is basically a webpage where one can play/pause music. It has other options like the home section, music section, about section, contact section, etc. In this project, we are going to make a website that will play/pause music using HTML, CSS, and JavaScript. We will use HTML to give a basic layout and with CSS, we will give beautify our design by giving aground and play pause button image. We will use basic JavaScript feature like if-else and document.getElementById to play and pause our music.
Approach:
We will create the basic layout i.e. two divs (left and right) inside one div tag. In the left div we will write some text and in the right div we will place play or pause image. We will also create a basic nav-bar and float in the right.
With the help of CSS, we will beautify our overall structure by giving background image, padding, margin etc.
We will use basic JavaScript functions like onclick(), play() , pause() and getElementById() to get the current status of music and make changes accordingly.
When user will play the music we will show play image or icon and when user presses pause  pause image or icon will be displayed. This is done using simple if-else statement.
Example:
HTML
<!DOCTYPE html><html lang="en"> <head>    <style>         /* Styling the body */        * {            padding: 0;            margin: 0;        }         /* Styling the background image by        giving its url and position */        .container {            height: 100vh;            width: 100%;            background-image: url('https://media.geeksforgeeks.org/wp-content/uploads/20210402235143/background.jpg');                         /* Image used: */            background-size: cover;            background-position: center;            position: relative;        }         /* Styling the list tags to the        right of the navigation bar */        .nav li {            float: right;            list-style: none;        }         /* Styling the anchor tags of        the navigation bar */        .nav a {            list-style: none;            height: 50px;            line-height: 50px;            font-size: 1rem;            font-weight: 550;            display: block;            padding: 5px 35px;            color: black;            text-decoration: none;        }         /* Giving position and margin        to the content-div */        .content {            width: 100%;            position: absolute;            top: 45%;        }         /* Styling the left-col by        giving margin */        .left-col {            margin-left: 11%;        }         /* Styling the my sound placed        in the left-col */        .left-col h1 {            font-size: 50px;            color: crimson;        }         /* Styling the right-col */        .right-col {            float: right;            margin-right: 10%;            margin-top: -5%;            display: flex;            align-items: center;        }         /* Styling the text in the right-col */        .right-col p {            font-size: 21px;            color: black;            font-weight: 650;            margin-right: 20px;        }         /* Styling the cursor type        of the icon to pointer */        #icon {            cursor: pointer;        }    </style></head> <body>    <div class="container">        <ul class="nav">            <li><a href="#">CONTACT</a></li>            <li><a href="#">ABOUT</a></li>            <li><a href="#">ARTISTS</a></li>            <li><a href="#">MUSIC</a></li>            <li><a href="#">HOME</a></li>        </ul>    </div>     <div class="content">        <div class="left-col">            <h1>MY <br> SOUNDS</h1>        </div>         <div class="right-col">              <p>Click Here To Listen</p>              <img src="media/play.png" id="icon">        </div>    </div>     <audio id="mysound">        <source src="media/music.mp3" type="audio/mp3">    </audio>     <script>        var mysound = document.getElementById("mysound");        var icon = document.getElementById("icon");         // Creating a function that will change        // pause to play and vice-versa        icon.onclick = function() {            if (mysound.paused) {                 // If paused then play the                // music and change the image                mysound.play();                icon.src ="https://media.geeksforgeeks.org/wp-content/uploads/20210402235545/Pause.png";            } else {                 // If playing then pause the                // music and change the image                mysound.pause();                icon.src ="https://media.geeksforgeeks.org/wp-content/uploads/20210402235520/play.png";            }        }    </script></body> </html>
Output:
adnanirshad158
akshaysingh98088
CSS-Properties
CSS-Questions
HTML-Attributes
HTML-Questions
HTML-Tags
HTML5
JavaScript-Methods
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.