Create a Music Website Template using HTML, CSS & JavaScript

Last Updated : 24 May, 2025

A Music Website Template is a pre-designed layout for creating a music-themed webpage. By utilizing HTML, CSS, and JavaScript, developers can craft a functional and visually appealing website with features like play/pause controls, sections for home, music, about, and contact.

Step-by-Step Guide to create to Create a Music Website Template Project

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 a play or pause image. We will also create a basic nav-bar and float it to the right.
With the help of CSS, we will beautify our overall structure by giving background images, padding, margin, etc.
We will use basic JavaScript functions like onclick(), play(), pause(), and getElementById() to get the current status of the music and make changes accordingly.
When the user will play the music we will show a play image or icon and when the user presses pause image or icon will be displayed. This is done using a simple if-else statement.

Example: In this example, we are using the above-explained approach.

index.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>         let mysound = document.getElementById("mysound");         let 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:

imsushant12

Improve

Article Tags :

Create a Music Website Template using HTML, CSS & JavaScript

Step-by-Step Guide to create to Create a Music Website Template Project

Similar Reads