To create a music player with JavaScript, you will need to have some basic understanding of HTML, CSS, and JavaScript. Here are the general steps to create a music player:
1. Create an HTML file and include a basic layout for your music player. You can use the following code as a starting point:
<!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>ScrollBar design usign Html and css</title>
<link rel="stylesheet" href="style.css">
<script src="https://democodewithar.000webhostapp.com/v3/music-player.js"></script>
</head>
<body>
<div class="container">
<div class="header flexCe">
<div class="logo">7</div>
<div class="title">Lorem ipsum dolor sit amet.</div>
</div>
<div class="flex">
<div class="main">
<div class="playing progress-bar">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="music-controll">
<span class="music-on-lenght">02:24</span>
<input type="range" class="progress">
<span class="music-total-lenght">04:06</span>
</div>
<div class="music-controll">
<div class="button prev">G</div>
<div class="button play">C</div>
<div class="button next">B</div>
<div class="volume flex">
<div class="button valume-dec">U</div>
<div class="button valume-inc">V</div>
</div>
</div>
</div>
<div class="song-list">
</div>
</div>
<audio src="./music/iPhone 6.mp3" class="audio"></audio>
</div>
<script src="script.js"></script>
</body>
</html>2. Create a CSS file and style your music player to make it look nice. You can use the following code as a starting point:
@font-face {
font-family: musicIcon;
src: url('/fonts/music-Icons.ttf')
}
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
user-select: none;
}
body {
font-family: system-ui;
color: #333;
background: #0084ff;
display: flex;
align-items: center;
justify-content: center;
height: 95vh;
}
.container {
width: 580px;
height: 320px;
background-color: #fff;
box-shadow: 2px 2px 5px #0004;
border: solid 1px #00d7ff;
border-radius: 4px;
overflow: hidden;
}
.flex {
display: flex;
}
.flexCe {
display: flex;
align-items: center;
}
.container .header {
width: 100%;
height: 38px;
border-bottom: solid 1px #0002;
width: -webkit-fill-available;
}
.title,
.song-title {
text-transform: capitalize;
font-weight: 600;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
line-height: 1.8;
}
.song-list {
width: -webkit-fill-available;
border-left: solid 1px #0001;
padding: 10px 15px;
position: relative;
}
.song-title {
font-weight: 400;
padding: 5px 40px 5px 16px;
}
.song {
width: -webkit-fill-available;
position: relative;
}
.song:hover {
background: #0001;
cursor: pointer;
}
.song.active {
background: #0001;
}
.song.active.play {
background: #0075ff24;
}
.active .song-title {
font-weight: 500;
}
.active .song-title::after {
content: "C";
font-family: "musicIcon";
width: 28px;
height: 28px;
position: absolute;
right: 0;
top: 5px;
}
.play .song-title::after {
content: "";
background-image: url("/music-svg.svg");
background-position: center;
background-size: contain;
right: 5px;
}
.progress-bar {
width: 280px;
height: 140px;
margin: 0 auto;
padding: 120px 0 20px;
display: flex;
justify-content: center;
}
.progress-bar .bar {
display: inline-block;
position: relative;
margin-right: 2px;
width: 16px;
height: 1px;
overflow: hidden;
background: linear-gradient(to bottom, #96ccff, #0084ff);
color: transparent;
animation-iteration-count: 1;
animation-name: pulse;
}
.progress-bar.play .bar {
animation-duration: 1s;
animation-iteration-count: infinite;
}
.bar:nth-child(1) {
animation-delay: 0.5s;
}
.bar:nth-child(2) {
animation-delay: 0.2s;
}
.bar:nth-child(3) {
animation-delay: 1.2s;
}
.bar:nth-child(4) {
animation-delay: 0.9s;
}
.bar:nth-child(5) {
animation-delay: 2.3s;
}
.bar:nth-child(6) {
animation-delay: 1.3s;
}
.bar:nth-child(7) {
animation-delay: 3.1s;
}
.bar:nth-child(8) {
animation-delay: 1.9s;
}
.bar:nth-child(9) {
animation-delay: 2s;
}
.bar:nth-child(10) {
animation-delay: 0.9s;
}
.bar:nth-child(11) {
animation-delay: 1.2s;
}
.bar:nth-child(12) {
animation-delay: 1.9s;
}
@keyframes pulse {
0% {
height: 1px;
margin-top: 0;
}
10% {
height: 40px;
margin-top: -40px;
}
50% {
height: 20px;
margin-top: -20px;
}
60% {
height: 30px;
margin-top: -30px;
}
80% {
height: 60px;
margin-top: -60px;
}
100% {
height: 1px;
margin-top: 0;
}
}
.music-controll {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.music-controll input {
margin: 0 10px;
}
.logo,
.music-controll .button {
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
width: 38px;
height: 38px;
background: #EEE;
cursor: pointer;
font-family: "musicIcon";
user-select: none;
}
.logo {
margin: 0 10px 0 0;
}
.music-controll .button {
border-radius: 4px;
color: #444;
transition: 0.2s;
background: radial-gradient(circle, #fff, #eee);
border: solid 1px #ddd;
}
.music-controll .button[array="true"] {
background: radial-gradient(circle, #fff, #ff7e7e);
color: #f00;
}
.button:active {
color: #0008;
border-color: #0002;
background: radial-gradient(circle, #fff, #dadada);
}3. Create a JavaScript file and add the following code to create a music player:
var api = "https://democodewithar.000webhostapp.com/v3";
codewithar.index({
element: {
title: ".title",
play: ".play",
audio: ".audio",
prev: ".prev",
next: ".next",
progress: ".progress",
progressBar: ".progress-bar",
musicLenght: ".music-on-lenght",
musicTotalLenght: ".music-total-lenght",
songList: ".song-list",
volume: {
inc: ".valume-inc",
dec: ".valume-dec"
},
},
// Songs
songs: [
{ title: "Neen Katore", src:api + "/music/neen katore.mp3" },
{ title: "iPhone", src: api +"/music/iPhone 6.mp3" },
{ title: "Yek Mulakat", src: api +"/music/Yek Mulakat.mp3" },
{ title: "Cradles x Apsara Aali - Komal Kaaya Ki Moh Maya", src:api + "/music/Cradles x Apsara Aali - Komal Kaaya Ki Moh Maya.mp3" },
{ title: "Jab Tum Aa Jate Ho Samne", src:api + "/music/Jab_Tum_Aa_Jate_Ho_Samne.m4a" },
{ title: "Sajan Tumse Pyaar Ki Ladai Mein ((( Jhankar ))) Maine Pyaar Kyun Kiya", src:api + "/music/Sajan Tumse Pyaar Ki Ladai Mein.mp3" },
]
})4. Finally, test your music player by opening your HTML file in a web browser.
Live View
Note that this is just a basic example of how to create a music player with JavaScript. You can customize it further by adding more features, such as shuffle and repeat, creating playlists, and adding a search function to search for specific songs.
@ Recommendations Videos
blogger theme design : spellcheck="false">https://youtu.be/DAIJTjRzxLk
Login Form : spellcheck="false">https://youtu.be/HWbAr1XN3Lc
Forms design : spellcheck="false">https://youtu.be/M2ERkDXjEuw
Responsive CSS card : spellcheck="false">https://youtu.be/Ol9_5cYtAaw
Navigation design : spellcheck="false">https://youtu.be/LNEgZBdWPGM
Thanks..