How to Create a Music Website with HTML, CSS, and JavaScript
This music website is a great way to share your love of music with the world. With HTML, CSS, and JavaScript, you can easily create a website that allows users to listen to music. The website is designed to be simple and easy to use, with a focus on the music itself.
If you want to get free source code then scroll down the post.
Introduction:
In today's digital age, having an online presence is crucial for musicians and bands. A well-designed music website serves as a central hub for your fans to connect with your music, discover upcoming events, and learn more about your artistry. In this tutorial, we will guide you through creating a music website using the powerful trio of HTML, CSS, and JavaScript. By following these steps, you'll be able to showcase your talent and engage with your audience effectively.
Features:
Users can play, pause, and skip tracks.
Benefits:
The website is a great way to share your music with the world.
The website is easy to use and navigate.
Call to Action:
If you're a music lover, or if you're looking for a way to share your music with the world, then this website is for you. Visit the website today and start listening to music!
Step 1: Planning and Structure
Before diving into coding, it's essential to plan your website's structure. Consider the sections you want to include, such as a homepage, an about page, a music library, an events page, and a contact form. Sketch out a wireframe or create a visual representation to get a clear vision of your website's layout and navigation.
Step 2: Setting up the HTML Structure
HTML forms the foundation of any website. Begin by creating a new HTML file and structuring it according to your wireframe. Utilize semantic HTML tags to enhance accessibility and search engine optimization (SEO). Divide your page into sections using appropriate tags such as `<header>`, `<nav>`, `<main>`, `<section>`, and `<footer>`. Remember to include descriptive alt attributes for images and provide meaningful text content.
Step 3: Styling with CSS
CSS allows you to add style, layout, and visual appeal to your website. Create a new CSS file and link it to your HTML file using the `<link>` tag. Begin by defining a color scheme and typography that aligns with your brand. Use CSS selectors to target specific elements and apply styles accordingly. Experiment with background images, gradients, and box shadows to enhance the overall aesthetics of your music website.
Step 4: Implementing Interactivity with JavaScript
JavaScript empowers you to add interactivity and dynamic elements to your website. Enhance the user experience by implementing features like audio players, event countdowns, image galleries, and more. Utilize JavaScript frameworks like jQuery or libraries like React.js if you require more advanced functionality. Ensure your JavaScript code is well-organized, efficient, and optimized for performance.
Step 5: Designing the Music Library
One of the primary features of a music website is the ability to showcase and share your music. Create a dedicated music library section where users can browse through your tracks or albums. Embed audio players or utilize HTML5 audio tags to enable playback. Consider implementing features like track descriptions, lyrics, album artwork, and social media sharing buttons to enhance engagement.
Here is an example of how you could create a music website:
1. Here is an example of HTML for a music website:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Website | FreeProjects1</title>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="menu_slide">
<h1>Music Web Store</h1>
<div class="playlist">
<h4 class="active"><span></span><i class="bi bi-music-note-beamed"></i> Playlist</h4>
<h4><span></span><i class="bi bi-music-note-beamed"></i> Last Listening</h4>
<h4><span></span><i class="bi bi-music-note-beamed"></i> Recommended</h4>
</div>
<div class="menu_song">
<li class="songItem">
<span>01</span>
<img src="images/1.png" alt="img">
<h5>
<p>Fade</p>
<div class="subtitle">Alan Walker</div>
</h5>
<i class="bi playlistPlay bi-play-circle-fill" id="1"></i>
</li>
<li class="songItem">
<span>02</span>
<img src="images/2.png" alt="img">
<h5>
<p>Main Hoon Hero Tera (Salman Khan Version) Full Song(MP3 70K)</p>
<div class="subtitle">Salman Khan</div>
</h5>
<i class="bi playlistPlay bi-play-circle-fill" id="2"></i>
</li>
<li class="songItem">
<span>03</span>
<img src="images/3.png" alt="img">
<h5>
<p>Aaj Dil Shayarana</p>
<div class="subtitle">Arijit Singh</div>
</h5>
<i class="bi playlistPlay bi-play-circle-fill" id="3"></i>
</li>
<li class="songItem">
<span>04</span>
<img src="images/4.png" alt="img">
<h5>
<p>Teri Jhuki Nazar</p>
<div class="subtitle">Shafqat Amanat Ali</div>
</h5>
<i class="bi playlistPlay bi-play-circle-fill" id="4"></i>
</li>
<li class="songItem">
<span>05</span>
<img src="images/5.png" alt="img">
<h5>
<p>Tum Hi Ho</p>
<div class="subtitle">Arijit Singh</div>
</h5>
<i class="bi playlistPlay bi-play-circle-fill" id="5"></i>
</li>
<li class="songItem">
<span>06</span>
<img src="images/6.png" alt="img">
<h5>
<p>Ik Vaari Aa - Raabta (Arijit Singh) 190Kbps</p>
<div class="subtitle">Arijit Singh</div>
</h5>
<i class="bi playlistPlay bi-play-circle-fill" id="6"></i>
</li>
<li class="songItem">
<span>07</span>
<img src="images/7.png" alt="img">
<h5>
<p>Sanam Re (Title Song) Arijit Singh 190Kbps</p>
<div class="subtitle">Arijit Singh</div>
</h5>
<i class="bi playlistPlay bi-play-circle-fill" id="7"></i>
</li>
<li class="songItem">
<span>08</span>
<img src="images/8.png" alt="img">
<h5>
<p>Tu Hai Ki Nahi</p>
<div class="subtitle">Ankit Tiwari</div>
</h5>
<i class="bi playlistPlay bi-play-circle-fill" id="8"></i>
</li>
<li class="songItem">
<span>09</span>
<img src="images/9.png" alt="img">
<h5>
<p>All Black - Raftaar, ukh-E Musical Doctorz 320kbps</p>
<div class="subtitle">Raftaar , ukh-E Musical Doctorz</div>
</h5>
<i class="bi playlistPlay bi-play-circle-fill" id="9"></i>
</li>
<li class="songItem">
<span>10</span>
<img src="images/10.png" alt="img">
<h5>
<p>Hai Dil Ye Mera</p>
<div class="subtitle">Arijit Singh</div>
</h5>
<i class="bi playlistPlay bi-play-circle-fill" id="10"></i>
</li>
</div>
</div>
<div class="song_slide">
<nav>
<ul>
<li>Discover <span></span></li>
<li>My Library</li>
<li>RADIO</li>
</ul>
<div class="search">
<i class="bi bi-search"></i>
<input type="text" placeholder="Search Music...">
</div>
<div class="user">
<img src="images/user.png" alt="img" title="FreeProjects1">
</div>
</nav>
<div class="content">
<h1>Alan Walker-Fade</h1>
<p>You were the shadow to my light Did you feel us Another start you fade <br>
Away afraid our aim is out of sight wanna see us Alive</p>
<div class="buttons">
<button>PLAY</button>
<button>FOLLOW</button>
</div>
</div>
<div class="popular_song">
<div class="h4">
<h4>Popular Song</h4>
<div class="btn_5">
<i id="left_scroll" class="bi bi-arrow-left-short"></i>
<i id="right_scroll" class="bi bi-arrow-right-short"></i>
</div>
</div>
<div class="pop_song">
<li class="songItem">
<div class="img_play">
<img src="images/7.png" alt="img">
<i class="bi playlistPlay bi-play-circle-fill" id="7"></i>
</div>
<h5>
<p>Sanam Re (Title Song) Arijit Singh 190Kbps</p>
<div class="subtitle">Arijit Singh</div>
</h5>
</li>
<li class="songItem">
<div class="img_play">
<img src="images/8.png" alt="img">
<i class="bi playlistPlay bi-play-circle-fill" id="8"></i>
</div>
<h5>
<p>Tu Hai Ki Nahi</p>
<div class="subtitle">Ankit Tiwari</div>
</h5>
</li>
<li class="songItem">
<div class="img_play">
<img src="images/9.png" alt="img">
<i class="bi playlistPlay bi-play-circle-fill" id="9"></i>
</div>
<h5>
<p>All Black - Raftaar, ukh-E Musical Doctorz 320kbps</p>
<div class="subtitle">Raftaar , ukh-E Musical Doctorz</div>
</h5>
</li>
<li class="songItem">
<div class="img_play">
<img src="images/10.png" alt="img">
<i class="bi playlistPlay bi-play-circle-fill" id="10"></i>
</div>
<h5>
<p>Hai Dil Ye Mera</p>
<div class="subtitle">Arijit Singh</div>
</h5>
</li>
<li class="songItem">
<div class="img_play">
<img src="images/11.png" alt="img">
<i class="bi playlistPlay bi-play-circle-fill" id="11"></i>
</div>
<h5>
<p>Main Woh Chaand</p>
<div class="subtitle">Darshan Raval</div>
</h5>
</li>
<li class="songItem">
<div class="img_play">
<img src="images/12.png" alt="img">
<i class="bi playlistPlay bi-play-circle-fill" id="12"></i>
</div>
<h5>
<p>Galliyan (Ek_Villain)</p>
<div class="subtitle">Ankit Tiwari</div>
</h5>
</li>
<li class="songItem">
<div class="img_play">
<img src="images/13.png" alt="img">
<i class="bi playlistPlay bi-play-circle-fill" id="13"></i>
</div>
<h5>
<p>Baarish (Yaariyan)</p>
<div class="subtitle">Mohammed Irfan & Gajendra Verma</div>
</h5>
</li>
<li class="songItem">
<div class="img_play">
<img src="images/14.png" alt="img">
<i class="bi playlistPlay bi-play-circle-fill" id="14"></i>
</div>
<h5>
<p>Blue Eyes (Yo Yo Honey Singh)</p>
<div class="subtitle">Yo Yo Honey Singh</div>
</h5>
</li>
<li class="songItem">
<div class="img_play">
<img src="images/15.png" alt="img">
<i class="bi playlistPlay bi-play-circle-fill" id="15"></i>
</div>
<h5>
<p>Banjaara</p>
<div class="subtitle">Mohammad Irfan</div>
</h5>
</li>
<li class="songItem">
<div class="img_play">
<img src="images/16.png" alt="img">
<i class="bi playlistPlay bi-play-circle-fill" id="16"></i>
</div>
<h5>
<p>Tanning</p>
<div class="subtitle">Yo Yo Honey Singh</div>
</h5>
</li>
</div>
</div>
<div class="popular_artists">
<div class="h4">
<h4>Popular Artists</h4>
<div class="btn_5">
<i id="left_scrolls" class="bi bi-arrow-left-short"></i>
<i id="right_scrolls" class="bi bi-arrow-right-short"></i>
</div>
</div>
<div class="item">
<li><img src="images/1.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/2.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/3.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/4.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/5.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/6.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/7.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/8.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/9.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/10.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/1.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/2.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/3.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/4.png" alt="artists" title="Arijit Singh"></li>
<li><img src="images/5.png" alt="artists" title="Arijit Singh"></li>
</div>
</div>
</div>
<div class="master_play">
<div class="wave">
<div class="wave1"></div>
<div class="wave1"></div>
<div class="wave1"></div>
</div>
<img src="images/1.png" alt="img" id="poster_master_play">
<h5 id="title"><p>Fade</p>
<div class="subtitle">Alan Waker</div>
</h5>
<div class="icon">
<i class="bi bi-skip-start-fill" id="back"></i>
<i class="bi bi-play-fill" id="masterPlay"></i>
<i class="bi bi-skip-end-fill" id="next"></i>
</div>
<span id="currentStart">0:00</span>
<div class="bar">
<input type="range" id="seek" min="0" value="0" max="100">
<div class="bar2" id="bar2"></div>
<div class="dot"></div>
</div>
<span id="currentEnd">0:00</span>
<div class="vol">
<i class="bi bi-volume-down-fill" id="vol_icon"></i>
<input type="range" id="vol" min="0" value="30" max="100">
<div class="vol_bar"></div>
<div class="dot" id="vol_dot"></div>
</div>
</div>
</header>
<script src="app.js"></script>
</body>
</html>
2. Here is an example of CSS for a music website:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background: #131312;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
header{
width: 85%;
height: 95%;
/* border: 1px solid #fff; */
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
header .song_slide, .menu_slide{
position: relative;
width: 25%;
height: 90%;
/* border: 1px solid #fff; */
background-color: #111727;
box-shadow: 5px 0 2px #090f1f;
color: #fff;
}
header .song_slide{
width: 75%;
background: #0b1320;
}
header .master_play{
width: 100%;
height: 10%;
background: #111727;
box-shadow: 0 3px 8px #090f1f;
}
header .menu_slide h1{
font-size: 20px;
margin: 15px 0 0 20px;
font-weight: 500;
}
header .menu_slide .playlist{
margin: 40px 0 0 20px;
}
header .menu_slide .playlist h4{
font-size: 14px;
font-weight: 400;
padding-bottom: 10px;
color: #4c5262;
cursor: pointer;
display: flex;
align-items: center;
transition: 0.3s linear;
}
header .menu_slide .playlist h4:hover{
color: #fff;
}
header .menu_slide .playlist h4 span{
position: relative;
margin-right: 35px;
}
header .menu_slide .playlist h4 span::before{
content: '';
position: absolute;
width: 4px;
height: 4px;
border: 2px solid #4c5262;
border-radius: 50%;
top: -4px;
transition: 0.3s linear;
}
header .menu_slide .playlist h4:hover span::before{
border: 2px solid #fff;
}
header .menu_slide .playlist h4 .bi{
display: none;
}
header .menu_slide .playlist .active{
color: #36e2ec;
}
header .menu_slide .playlist .active span{
display: none;
}
header .menu_slide .playlist .active .bi{
display: flex;
margin-right: 20px;
}
header .menu_slide .menu_song{
width: 100%;
height: 390px;
/* border: 1px solid #fff; */
margin-top: 40px;
overflow-y: auto;
overflow-x: hidden;
}
header .menu_slide .menu_song::-webkit-scrollbar{
width: 2px;
}
header .menu_slide .menu_song::-webkit-scrollbar-thumb{
background: #aaa;
}
header .menu_slide .menu_song::-webkit-scrollbar-track{
background: #111727;
}
header .menu_slide .menu_song li{
position: relative;
list-style-type: none;
padding: 5px 0 5px 20px;
display: flex;
align-items: center;
margin-bottom: 10px;
cursor: pointer;
transition: 0.3s linear;
}
header .menu_slide .menu_song li:hover{
background: rgba(105, 105, 170, 0.1);
}
header .menu_slide .menu_song li span{
font-size: 12px;
font-weight: 600;
color: #4c5262;
}
header .menu_slide .menu_song li img{
width: 32px;
height: 32px;
margin-left: 25px;
}
header .menu_slide .menu_song li h5{
margin-left: 15px;
display: flex;
flex-direction: column;
width: 55%;
}
header .menu_slide .menu_song li h5 p{
font-size: 11px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
header .menu_slide .menu_song li h5 .subtitle{
font-size: 9px;
color: #4c5262;
}
header .menu_slide .menu_song li .bi{
position: absolute;
right: 15px;
top: 12px;
/* top: 6px; */
font-size: 16px;
}
header .master_play{
display: flex;
align-items: center;
padding: 0 20px;
}
header .master_play .wave{
width: 30px;
height: 30px;
/* border: 1px solid #fff; */
padding-bottom: 5px;
display: flex;
align-items: flex-end;
margin-right: 10px;
}
header .master_play .wave .wave1{
width: 3px;
height: 10px;
margin-right: 3px;
border-radius: 10px 10px 0 0;
background: #36e2ec;
animation: unset;
}
header .master_play .wave .wave1:nth-child(2){
height: 13px;
width: 3.2px;
/* animation-delay: .4s; */
}
header .master_play .wave .wave1:nth-child(3){
height: 8px;
/* animation-delay: .8s; */
}
/* JavaScript wave class */
header .master_play .active2 .wave1{
animation: wave 0.5s linear infinite;
}
header .master_play .active2 .wave1:nth-child(2){
animation-delay: .4s;
}
header .master_play .active2 .wave1:nth-child(3){
animation-delay: .8s;
}
@keyframes wave{
0%{
height: 10px;
}
50%{
height: 15px;
}
100%{
height: 10px;
}
}
header .master_play img{
width: 35px;
height: 35px;
}
header .master_play h5{
width: 130px;
margin-left: 15px;
color: #fff;
line-height: 17px;
}
header .master_play h5 p, header .master_play h5 .subtitle{
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
header .master_play h5 p{
font-size: 13px;
}
header .master_play h5 .subtitle{
font-size: 11px;
color: #4c5262;
}
header .master_play .icon{
font-size: 20px;
color: #fff;
margin: 0 20px 0 40px;
}
header .master_play .icon .bi{
cursor: pointer;
outline: none;
}
header .master_play .icon .bi:nth-child(2){
border: 1px solid rgba(105, 105, 170, 0.1);
border-radius: 50%;
/* padding: 0px 2px 0px 3px; */
padding: 1px 3px 0 6px;
margin: 0 5px;
transition: 0.3s linear;
}
header .master_play span{
color: #fff;
width: 32px;
font-size: 11px;
font-weight: 400;
}
header .master_play #currentStart{
margin: 0 0 0 20px;
}
header .master_play .bar{
position: relative;
width: 43%;
height: 2px;
background: rgba(105, 105, 170, 0.1);
margin: 0 15px 0 10px;
}
header .master_play .bar .bar2{
position: absolute;
background: #36e2ec;
width: 0%;
height: 100%;
top: 0;
transition: .3s linear;
}
header .master_play .bar .dot{
position: absolute;
width: 5px;
height: 5px;
background: #36e2ec;
border-radius: 50%;
top: -1px;
left: 0;
transition: 0.3s linear;
}
header .master_play .bar .dot::before{
content: '';
position: absolute;
width: 15px;
height: 15px;
border: 1px solid #36e2ec;
border-radius: 50%;
top: -6px;
left: -6px;
box-shadow: inset 0 0 3px #36e2ec;
}
header .master_play .bar input{
position: absolute;
width: 100%;
top: -6px;
left: 0;
cursor: pointer;
z-index: 999999;
/* transition: 0.3s linear; */
opacity: 0;
}
header .master_play .vol{
position: relative;
width: 150px;
/* width: 100px; */
height: 2px;
margin-left: 50px;
background: rgba(105, 105, 170, 0.1);
}
header .master_play .vol .bi{
position: absolute;
color: #fff;
font-size: 25px;
top: -17px;
left: -30px;
}
header .master_play .vol input{
position: absolute;
width: 100%;
top: -7px;
/* top: -10px; */
left: 0;
cursor: pointer;
z-index: 999999;
transition: 0.3s linear;
opacity: 0;
}
header .master_play .vol .vol_bar{
position: absolute;
background: #36e2ec;
width: 0%;
height: 100%;
top: 0;
transition: 0.3s linear;
}
header .master_play .vol .dot{
position: absolute;
width: 5px;
height: 5px;
background: #36e2ec;
border-radius: 50%;
top: -1px;
left: 0;
transition: 0.3s linear;
}
header .master_play .vol .dot::before{
content: '';
position: absolute;
width: 15px;
height: 15px;
border: 1px solid #36e2ec;
border-radius: 50%;
top: -6px;
left: -6px;
box-shadow: inset 0 0 3px #36e2ec;
}
header .song_slide{
z-index: 2;
}
header .song_slide::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
/* height: 300px; */
background: url('images/bg.jpg');
background-size: cover;
opacity: 0.3;
z-index: -1;
}
header .song_slide nav{
width: 90%;
height: 10%;
margin: auto;
/* border: 1px solid #fff; */
display: flex;
justify-content: space-between;
align-items: center;
}
header .song_slide nav ul{
display: flex;
}
header .song_slide nav ul li{
position: relative;
list-style-type: none;
font-size: 13px;
color: #4c5262;
margin-right: 25px;
cursor: pointer;
transition: 0.3s linear;
}
header .song_slide nav ul li:hover{
color: #fff;
}
header .song_slide nav ul li:nth-child(1){
color: #fff;
}
header .song_slide nav ul li span{
position: absolute;
width: 100%;
height: 2.5px;
background: #36e2ec;
bottom: -5px;
left: 0;
border-radius: 20px;
}
header .song_slide nav .search{
position: relative;
width: 40%;
padding: 1px 10px;
border-radius: 20px;
color: grey;
display: flex;
align-items: center;
}
header .song_slide nav .search::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px;
background: rgba(184, 184, 184, 0.1);
backdrop-filter: blur(5px);
z-index: -1;
}
header .song_slide nav .search .bi{
font-size: 13px;
padding: 3px 0 0 10px;
}
header .song_slide nav .search input{
background: none;
outline: none;
border: none;
padding: 5px 10px;
color: #fff;
font-size: 12px;
}
header .song_slide nav .user{
position: relative;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
}
header .song_slide nav .user img{
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
box-shadow: 2px 2px 8px #131312;
}
header .song_slide .content{
width: 90%;
height: 30%;
margin: auto;
/* border: 1px solid #fff; */
padding-top: 20px;
}
header .song_slide .content h1{
font-size: 25px;
font-weight: 600;
}
header .song_slide .content p{
font-size: 11px;
font-weight: 400;
color: #4c5262;
margin: 5px;
}
header .song_slide .content .buttons{
margin-top: 15px;
}
header .song_slide .content .buttons button{
width: 130px;
height: 30px;
border: 2px solid #36e2ec;
outline: none;
border-radius: 20px;
background: #5adae0;
color: #fff;
cursor: pointer;
transition: 0.3s linear;
}
header .song_slide .content .buttons button:hover, header .song_slide .content .buttons button:nth-child(2){
border: 2px solid #36e2ec;
background: none;
color: #36e2ec;
}
header .song_slide .content .buttons button:nth-child(2):hover{
border: 2px solid #36e2ec;
background: #36e2ec;
color: #fff;
}
header .song_slide .popular_song{
width: 90%;
height: auto;
/* border: 1px solid #fff; */
margin: auto;
/* margin-top: 15px; */
}
header .song_slide .popular_song .h4{
display: flex;
justify-content: space-between;
align-items: center;
}
header .song_slide .popular_song .h4 .bi{
color: #a4a8b4;
cursor: pointer;
transition: 0.3s linear;
}
header .song_slide .popular_song .h4 .bi:hover{
color: #fff;
}
header .song_slide .popular_song .pop_song{
width: 100%;
height: 150px;
margin-top: 15px;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
}
header .song_slide .popular_song .pop_song::-webkit-scrollbar{
display: none;
}
header .song_slide .popular_song .pop_song li{
min-width: 100px;
height: 140px;
list-style-type: none;
margin-right: 10px;
transition: 0.3s linear;
}
header .song_slide .popular_song .pop_song li:hover{
background: rgba(105, 105, 170, 0.1);
}
header .song_slide .popular_song .pop_song li .img_play{
position: relative;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
header .song_slide .popular_song .pop_song li .img_play img{
width: 100%;
height: 100%;
}
header .song_slide .popular_song .pop_song li .img_play .bi{
position: absolute;
font-size: 20px;
cursor: pointer;
transition: 0.3s linear;
opacity: 0;
}
header .song_slide .popular_song .pop_song li .img_play .bi:hover{
opacity: 1;
}
header .song_slide .popular_song .pop_song li h5{
padding: 5px 0 0 5px;
line-height: 15px;
}
header .song_slide .popular_song .pop_song li h5 p, header .song_slide .popular_song .pop_song li h5 .subtitle{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
header .song_slide .popular_song .pop_song li h5 p{
font-size: 10px;
}
header .song_slide .popular_song .pop_song li h5 .subtitle{
font-size: 9px;
color: #4c5262;
}
header .song_slide .popular_artists{
width: 90%;
height: auto;
/* border: 1px solid #fff; */
margin: auto;
margin-top: 30px;
}
header .song_slide .popular_artists .h4{
display: flex;
justify-content: space-between;
align-items: center;
}
header .song_slide .popular_artists .h4 .bi{
color: #a4a8b4;
cursor: pointer;
transition: 0.3s linear;
}
header .song_slide .popular_artists .h4 .bi:hover{
color: #fff;
}
header .song_slide .popular_artists .item{
width: 100%;
height: auto;
margin-top: 15px;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
}
header .song_slide .popular_artists .item::-webkit-scrollbar{
display: none;
}
header .song_slide .popular_artists .item li{
list-style-type: none;
position: relative;
min-width: 60px;
height: 60px;
background: #fff;
border-radius: 50%;
margin-right: 20px;
cursor: pointer;
}
header .song_slide .popular_artists .item li img{
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
}
2. Here is an example of JS for a music website:
const music = new Audio('faded.mp3');
// Create an array
const songs = [
{
id: '1',
songName: `<p>Fade</p>
<div class="subtitle">Alan Walker</div>`,
poster: "images/1.png"
},
{
id: '2',
songName: `<p>Main Hoon Hero Tera (Salman Khan Version) Full Song(MP3 70K)</p>
<div class="subtitle">Salman Khan</div>`,
poster: "images/2.png"
},
{
id: '3',
songName: `<p>Aaj Dil Shayarana</p>
<div class="subtitle">Arijit Singh</div>`,
poster: "images/3.png"
},
{
id: '4',
songName: `<p>Teri Jhuki Nazar</p>
<div class="subtitle">Shafqat Amanat Ali</div>`,
poster: "images/4.png"
},
{
id: '5',
songName: `<p>Tum Hi Ho</p>
<div class="subtitle">Arijit Singh</div>`,
poster: "images/5.png"
},
{
id: '6',
songName: `<p>Ik Vaari Aa - Raabta (Arijit Singh) 190Kbps</p>
<div class="subtitle">Arijit Singh</div>`,
poster: "images/6.png"
},
{
id: '7',
songName: `<p>Sanam Re (Title Song) Arijit Singh 190Kbps</p>
<div class="subtitle">Arijit Singh</div>`,
poster: "images/7.png"
},
{
id: '8',
songName: `<p>Tu Hai Ki Nahi</p>
<div class="subtitle">Ankit Tiwari</div>`,
poster: "images/8.png"
},
{
id: '9',
songName: `<p>All Black - Raftaar, Sukh-E Musical Doctorz 320kbps</p>
<div class="subtitle">Raftaar , Sukh-E Musical Doctorz</div>`,
poster: "images/9.png"
},
{
id: '10',
songName: `<p>Hai Dil Ye Mera</p>
<div class="subtitle">Arijit Singh</div>`,
poster: "images/10.png"
},
{
id: '11',
songName: `<p>Main Woh Chaand</p>
<div class="subtitle">Darshan Raval</div>`,
poster: "images/11.png"
},
{
id: '12',
songName: `<p>Galliyan (Ek_Villain)</p>
<div class="subtitle">Ankit Tiwari</div>`,
poster: "images/12.png"
},
{
id: '13',
songName: `<p>Baarish (Yaariyan)</p>
<div class="subtitle">Mohammed Irfan & Gajendra Verma</div>`,
poster: "images/13.png"
},
{
id: '14',
songName: `<p>Blue Eyes (Yo Yo Honey Singh)</p>
<div class="subtitle">Yo Yo Honey Singh</div>`,
poster: "images/14.png"
},
{
id: '15',
songName: `<p>Banjaara</p>
<div class="subtitle">Mohammad Irfan</div>`,
poster: "images/15.png"
},
{
id: '16',
songName: `<p>Tanning</p>
<div class="subtitle">Yo Yo Honey Singh</div>`,
poster: "images/16.png"
},
]
Array.from(document.getElementsByClassName('songItem')).forEach((element, i) => {
element.getElementsByTagName('img')[0].src = songs[i].poster;
element.getElementsByTagName('h5')[0].innerHTML = songs[i].songName;
})
let masterPlay = document.getElementById("masterPlay");
let wave = document.getElementsByClassName('wave')[0];
masterPlay.addEventListener("click", () => {
if(music.paused || music.currentTime <= 0){
music.play();
masterPlay.classList.remove("bi-play-fill");
masterPlay.classList.add("bi-pause-fill");
wave.classList.add('active2');
} else{
music.pause();
masterPlay.classList.add("bi-play-fill");
masterPlay.classList.remove("bi-pause-fill");
wave.classList.remove('active2');
}
})
const pauseAllSongs = () => {
Array.from(document.getElementsByClassName('playlistPlay')).forEach((element) => {
element.classList.add("bi-play-circle-fill");
element.classList.remove("bi-pause-circle-fill");
})
}
const makeAllBackgrounds = () => {
Array.from(document.getElementsByClassName('songItem')).forEach((element) => {
element.style.background = "rgba(105, 105, 105, 0)";
})
}
let index = 0;
let poster_master_play = document.getElementById('poster_master_play');
let title = document.getElementById('title');
Array.from(document.getElementsByClassName('playlistPlay')).forEach((element) => {
element.addEventListener("click", (e) =>{
index = e.target.id;
pauseAllSongs();
e.target.classList.remove("bi-play-circle-fill");
e.target.classList.add("bi-pause-circle-fill");
music.src = `audio/${index}.mp3`;
poster_master_play.src = `images/${index}.png`;
music.play();
let song_title = songs.filter((ele) => {
return ele.id == index;
})
song_title.forEach(ele => {
let {songName} = ele;
title.innerHTML = songName;
})
masterPlay.classList.remove("bi-play-fill");
masterPlay.classList.add("bi-pause-fill");
wave.classList.add('active2');
music.addEventListener("ended", () => {
masterPlay.classList.add("bi-play-fill");
masterPlay.classList.remove("bi-pause-fill");
wave.classList.remove('active2');
})
makeAllBackgrounds();
Array.from(document.getElementsByClassName('songItem'))[`${index - 1}`].style.background = "rgba(105, 105, 105, .1)";
})
})
let currentStart = document.getElementById('currentStart');
let currentEnd = document.getElementById('currentEnd');
let seek = document.getElementById('seek');
let bar2 = document.getElementById('bar2');
let dot = document.getElementsByClassName('dot')[0];
music.addEventListener("timeupdate", () => {
let music_current = music.currentTime;
let music_duration = music.duration;
let min = Math.floor(music_current/60);
let sec = Math.floor(music_current%60);
if(sec < 10){
sec = `0${sec}`;
}
currentStart.innerHTML = `${min}:${sec}`;
let min2 = Math.floor(music_duration/60);
let sec2 = Math.floor(music_duration%60);
if(sec2 < 10){
sec2 = `0${sec2}`;
}
currentEnd.innerHTML = `${min2}:${sec2}`;
let progressBar = parseInt((music.currentTime/music.duration) * 100);
seek.value = progressBar;
let seekBar = seek.value;
bar2.style.width = `${seekBar}%`;
dot.style.left = `${seekBar}%`;
})
seek.addEventListener('change', () =>{
music.currentTime = seek.value * music.duration /100;
})
seek.addEventListener('ended', () =>{
masterPlay.classList.add("bi-play-fill");
masterPlay.classList.remove("bi-pause-fill");
wave.classList.remove('active2');
})
let vol_icon = document.getElementById('vol_icon');
let vol = document.getElementById('vol');
let vol_dot = document.getElementById('vol_dot');
let vol_bar = document.getElementsByClassName('vol_bar')[0];
vol.addEventListener('change', () => {
if(vol.value == 0){
vol_icon.classList.remove("bi-volume-down-fill");
vol_icon.classList.add("bi-volume-mute-fill");
vol_icon.classList.remove("bi-volume-up-fill");
}
if(vol.value > 0){
vol_icon.classList.add("bi-volume-down-fill");
vol_icon.classList.remove("bi-volume-mute-fill");
vol_icon.classList.remove("bi-volume-up-fill");
}
if(vol.value > 50){
vol_icon.classList.remove("bi-volume-down-fill");
vol_icon.classList.remove("bi-volume-mute-fill");
vol_icon.classList.add("bi-volume-up-fill");
}
let vol_a = vol.value;
vol_bar.style.width = `${vol_a}%`;
vol_dot.style.left = `${vol_a}%`;
music.volume = vol_a/100;
})
let back = document.getElementById('back');
let next = document.getElementById('next');
back.addEventListener('click', () => {
index -= 1;
if(index < 1){
index = Array.from(document.getElementsByClassName('songItem')).length;
}
music.src = `audio/${index}.mp3`;
poster_master_play.src = `images/${index}.png`;
music.play();
let song_title = songs.filter((ele) => {
return ele.id == index;
})
song_title.forEach(ele => {
let {songName} = ele;
title.innerHTML = songName;
})
pauseAllSongs();
document.getElementById(`${index}`).classList.remove("bi-play-fill");
document.getElementById(`${index}`).classList.add("bi-pause-fill");
makeAllBackgrounds();
Array.from(document.getElementsByClassName('songItem'))[`${index - 1}`].style.background = "rgba(105, 105, 105, .1)";
})
next.addEventListener('click', () => {
index -= 0;
index += 1;
if(index > Array.from(document.getElementsByClassName('songItem')).length){
index = 1;
}
music.src = `audio/${index}.mp3`;
poster_master_play.src = `images/${index}.png`;
music.play();
let song_title = songs.filter((ele) => {
return ele.id == index;
})
song_title.forEach(ele => {
let {songName} = ele;
title.innerHTML = songName;
})
pauseAllSongs();
document.getElementById(`${index}`).classList.remove("bi-play-fill");
document.getElementById(`${index}`).classList.add("bi-pause-fill");
makeAllBackgrounds();
Array.from(document.getElementsByClassName('songItem'))[`${index - 1}`].style.background = "rgba(105, 105, 105, .1)";
})
let left_scroll = document.getElementById('left_scroll');
let right_scroll = document.getElementById('right_scroll');
let pop_song = document.getElementsByClassName('pop_song')[0];
left_scroll.addEventListener('click', () =>{
pop_song.scrollLeft -= 330;
})
right_scroll.addEventListener('click', () =>{
pop_song.scrollLeft += 330;
})
let left_scrolls = document.getElementById('left_scrolls');
let right_scrolls = document.getElementById('right_scrolls');
let item = document.getElementsByClassName('item')[0];
left_scrolls.addEventListener('click', () =>{
item.scrollLeft -= 330;
})
right_scrolls.addEventListener('click', () =>{
item.scrollLeft += 330;
})
Conclusion:
Building a music website using HTML, CSS, and JavaScript
Download the source code of this project-
get images and audio files for free -
music website, HTML, CSS, JavaScript, music player, music streaming, music sharing, responsive website, web development, web design, music lover, music fan, music enthusiast
Please do not enter any spam link in the comment box.