+ ![]()
+
+
+
+
+
+
+
+
+
+ 0:00
+ 0:00
+
+
+ skip_previous
+
+
+ play_arrow
+
+ skip_next
+
+
+
+
+
+
+
+
diff --git a/JavaScript/Music Player/js/music-list.js b/JavaScript/Music Player/js/music-list.js
new file mode 100644
index 0000000..23799a4
--- /dev/null
+++ b/JavaScript/Music Player/js/music-list.js
@@ -0,0 +1,56 @@
+// To add more song, just copy the following code and paste inside the array
+
+// {
+// name: "Here is the music name",
+// artist: "Here is the artist name",
+// img: "image name here - remember img must be in .jpg formate and it's inside the images folder of this project folder",
+// src: "music name here - remember img must be in .mp3 formate and it's inside the songs folder of this project folder"
+// }
+
+//paste it inside the array as more as you want music then you don't need to do any other thing
+
+let allMusic = [
+ {
+ name: "Tu Jaane Na",
+ artist: "Atif Aslam",
+ img: "music-1",
+ src: "music-1"
+ },
+ {
+ name: "Tum Tak",
+ artist: "A R Rahman",
+ img: "music-2",
+ src: "music-2"
+ },
+ {
+ name: "Ye Tune Kya Kiya",
+ artist: "Javed Bashir",
+ img: "music-3",
+ src: "music-3"
+ },
+ {
+ name: "Agar Tum Saath Ho",
+ artist: "Alka Yagnik",
+ img: "music-4",
+ src: "music-4"
+ },
+ {
+ name: "Lut Gaye",
+ artist: "Jubin Nautiyal",
+ img: "music-5",
+ src: "music-5"
+ },
+ {
+ name: "Tu Hi Yaar Mera",
+ artist: "Arijit Singh",
+ img: "music-6",
+ src: "music-6"
+ },
+ // like this paste it and remember to give comma after ending of this bracket }
+ // {
+ // name: "Here is the music name",
+ // artist: "Here is the artist name",
+ // img: "image name here - remember img must be in .jpg formate and it's inside the images folder of this project folder",
+ // src: "music name here - remember img must be in .mp3 formate and it's inside the songs folder of this project folder"
+ // }
+];
\ No newline at end of file
diff --git a/JavaScript/Music Player/js/script.js b/JavaScript/Music Player/js/script.js
new file mode 100644
index 0000000..d85ce99
--- /dev/null
+++ b/JavaScript/Music Player/js/script.js
@@ -0,0 +1,117 @@
+const wrapper = document.querySelector(".wrapper"),
+musicImg = wrapper.querySelector(".img-area img"),
+musicName = wrapper.querySelector(".song-details .name"),
+musicArtist = wrapper.querySelector(".song-details .artist"),
+playPauseBtn = wrapper.querySelector(".play-pause"),
+prevBtn = wrapper.querySelector("#prev"),
+nextBtn = wrapper.querySelector("#next"),
+mainAudio = wrapper.querySelector("#main-audio"),
+progressArea = wrapper.querySelector(".progress-area"),
+progressBar = progressArea.querySelector(".progress-bar"),
+musicList = wrapper.querySelector(".music-list"),
+moreMusicBtn = wrapper.querySelector("#more-music"),
+closemoreMusic = musicList.querySelector("#close");
+
+let musicIndex = Math.floor((Math.random() * allMusic.length) + 1);
+isMusicPaused = true;
+
+window.addEventListener("load", ()=>{
+ loadMusic(musicIndex);
+ playingSong();
+});
+
+function loadMusic(indexNumb){
+ musicName.innerText = allMusic[indexNumb - 1].name;
+ musicArtist.innerText = allMusic[indexNumb - 1].artist;
+ musicImg.src = `images/${allMusic[indexNumb - 1].src}.jpeg`;
+ mainAudio.src = `songs/${allMusic[indexNumb - 1].src}.mp3`;
+}
+
+//play music function
+function playMusic(){
+ wrapper.classList.add("paused");
+ playPauseBtn.querySelector("i").innerText = "pause";
+ mainAudio.play();
+}
+
+//pause music function
+function pauseMusic(){
+ wrapper.classList.remove("paused");
+ playPauseBtn.querySelector("i").innerText = "play_arrow";
+ mainAudio.pause();
+}
+
+//prev music function
+function prevMusic(){
+ musicIndex--; //decrement of musicIndex by 1
+ //if musicIndex is less than 1 then musicIndex will be the array length so the last music play
+ musicIndex < 1 ? musicIndex = allMusic.length : musicIndex = musicIndex;
+ loadMusic(musicIndex);
+ playMusic();
+}
+
+//next music function
+function nextMusic(){
+ musicIndex++; //increment of musicIndex by 1
+ //if musicIndex is greater than array length then musicIndex will be 1 so the first music play
+ musicIndex > allMusic.length ? musicIndex = 1 : musicIndex = musicIndex;
+ loadMusic(musicIndex);
+ playMusic();
+}
+
+// play or pause button event
+playPauseBtn.addEventListener("click", ()=>{
+ const isMusicPlay = wrapper.classList.contains("paused");
+ //if isPlayMusic is true then call pauseMusic else call playMusic
+ isMusicPlay ? pauseMusic() : playMusic();
+});
+
+//prev music button event
+prevBtn.addEventListener("click", ()=>{
+ prevMusic();
+});
+
+//next music button event
+nextBtn.addEventListener("click", ()=>{
+ nextMusic();
+});
+
+// update progress bar width according to music current time
+mainAudio.addEventListener("timeupdate", (e)=>{
+ const currentTime = e.target.currentTime; //getting playing song currentTime
+ const duration = e.target.duration; //getting playing song total duration
+ let progressWidth = (currentTime / duration) * 100;
+ progressBar.style.width = `${progressWidth}%`;
+
+ let musicCurrentTime = wrapper.querySelector(".current-time"),
+ musicDuartion = wrapper.querySelector(".max-duration");
+ mainAudio.addEventListener("loadeddata", ()=>{
+ // update song total duration
+ let mainAdDuration = mainAudio.duration;
+ let totalMin = Math.floor(mainAdDuration / 60);
+ let totalSec = Math.floor(mainAdDuration % 60);
+ if(totalSec < 10){ //if sec is less than 10 then add 0 before it
+ totalSec = `0${totalSec}`;
+ }
+ musicDuartion.innerText = `${totalMin}:${totalSec}`;
+ });
+ // update playing song current time
+ let currentMin = Math.floor(currentTime / 60);
+ let currentSec = Math.floor(currentTime % 60);
+ if(currentSec < 10){ //if sec is less than 10 then add 0 before it
+ currentSec = `0${currentSec}`;
+ }
+ musicCurrentTime.innerText = `${currentMin}:${currentSec}`;
+});
+
+// update playing song currentTime on according to the progress bar width
+progressArea.addEventListener("click", (e)=>{
+ let progressWidth = progressArea.clientWidth; //getting width of progress bar
+ let clickedOffsetX = e.offsetX; //getting offset x value
+ let songDuration = mainAudio.duration; //getting song total duration
+
+ mainAudio.currentTime = (clickedOffsetX / progressWidth) * songDuration;
+ playMusic(); //calling playMusic function
+});
+
+
diff --git a/JavaScript/Music Player/songs/music-1.mp3 b/JavaScript/Music Player/songs/music-1.mp3
new file mode 100644
index 0000000..7aa853a
Binary files /dev/null and b/JavaScript/Music Player/songs/music-1.mp3 differ
diff --git a/JavaScript/Music Player/songs/music-2.mp3 b/JavaScript/Music Player/songs/music-2.mp3
new file mode 100644
index 0000000..26f569f
Binary files /dev/null and b/JavaScript/Music Player/songs/music-2.mp3 differ
diff --git a/JavaScript/Music Player/songs/music-3.mp3 b/JavaScript/Music Player/songs/music-3.mp3
new file mode 100644
index 0000000..4f33923
Binary files /dev/null and b/JavaScript/Music Player/songs/music-3.mp3 differ
diff --git a/JavaScript/Music Player/songs/music-4.mp3 b/JavaScript/Music Player/songs/music-4.mp3
new file mode 100644
index 0000000..5336775
Binary files /dev/null and b/JavaScript/Music Player/songs/music-4.mp3 differ
diff --git a/JavaScript/Music Player/songs/music-5.mp3 b/JavaScript/Music Player/songs/music-5.mp3
new file mode 100644
index 0000000..02490a1
Binary files /dev/null and b/JavaScript/Music Player/songs/music-5.mp3 differ
diff --git a/JavaScript/Music Player/songs/music-6.mp3 b/JavaScript/Music Player/songs/music-6.mp3
new file mode 100644
index 0000000..4d7ce77
Binary files /dev/null and b/JavaScript/Music Player/songs/music-6.mp3 differ
diff --git a/JavaScript/Music Player/style.css b/JavaScript/Music Player/style.css
new file mode 100644
index 0000000..70fd912
--- /dev/null
+++ b/JavaScript/Music Player/style.css
@@ -0,0 +1,148 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: "Poppins", sans-serif;
+}
+
+*::before, *::after{
+ padding: 0;
+ margin: 0;
+}
+:root{
+ --pink: #ff74a4;
+ --violet: #9f6ea3;
+ --lightblack: #515C6F;
+ --white: #ffffff;
+ --darkwhite: #cecaca;
+ --pinkshadow: #ffcbdd;
+ --lightbshadow: rgba(0,0,0,0.15);
+}
+body{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ background: linear-gradient(var(--pink) 0%, var(--violet) 100%);
+}
+.wrapper{
+ width: 380px;
+ padding: 25px 30px;
+ overflow: hidden;
+ position: relative;
+ border-radius: 15px;
+ background: var(--white);
+ box-shadow: 0px 6px 15px var(--lightbshadow);
+}
+.wrapper i{
+ cursor: pointer;
+}
+.progress-area .song-timer,
+.controls, .music-list .header{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.top-bar{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.top-bar i{
+ font-size: 30px;
+ color: var(--lightblack);
+}
+.top-bar i:first-child{
+ margin-left: -7px;
+}
+.top-bar span{
+ font-size: 18px;
+ margin-left: -3px;
+ color: var(--lightblack);
+}
+.img-area{
+ width: 100%;
+ height: 256px;
+ overflow: hidden;
+ margin-top: 25px;
+ border-radius: 15px;
+ box-shadow: 0px 6px 12px var(--lightbshadow);
+}
+.img-area img{
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.song-details{
+ text-align: center;
+ margin: 30px 0;
+}
+.song-details p{
+ color: var(--lightblack);
+}
+.song-details .name{
+ font-size: 21px;
+}
+.song-details .artist{
+ font-size: 18px;
+ opacity: 0.9;
+ line-height: 35px;
+}
+.progress-area{
+ height: 6px;
+ width: 100%;
+ border-radius: 50px;
+ background: #f0f0f0;
+ cursor: pointer;
+}
+.progress-area .progress-bar{
+ height: inherit;
+ width: 0%;
+ position: relative;
+ border-radius: inherit;
+ background: linear-gradient(90deg, var(--pink) 0%, var(--violet) 100%);
+}
+
+.controls{
+ margin: 40px 70px 5px 70px;
+}
+.controls i{
+ font-size: 28px;
+ user-select: none;
+ background: linear-gradient(var(--pink) 0%, var(--violet) 100%);
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+.controls .play-pause{
+ height: 54px;
+ width: 54px;
+ display: flex;
+ cursor: pointer;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ background: linear-gradient(var(--white) 0%, var(--darkwhite) 100%);
+ box-shadow: 0px 0px 5px var(--pink);
+}
+.play-pause::before{
+ position: absolute;
+ content: "";
+ height: 43px;
+ width: 43px;
+ border-radius: inherit;
+ background: linear-gradient(var(--pink) 0%, var(--violet) 100%);
+}
+.play-pause i{
+ height: 43px;
+ width: 43px;
+ line-height: 43px;
+ text-align: center;
+ background: inherit;
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ position: absolute;
+}
\ No newline at end of file