ows-web · ankitranjan1028 · Oct 25, 2022
diff --git a/JavaScript/Music Player/images/music-1.jpeg b/JavaScript/Music Player/images/music-1.jpeg
diff --git a/JavaScript/Music Player/images/music-2.jpeg b/JavaScript/Music Player/images/music-2.jpeg
diff --git a/JavaScript/Music Player/images/music-3.jpeg b/JavaScript/Music Player/images/music-3.jpeg
diff --git a/JavaScript/Music Player/images/music-4.jpeg b/JavaScript/Music Player/images/music-4.jpeg
diff --git a/JavaScript/Music Player/images/music-5.jpeg b/JavaScript/Music Player/images/music-5.jpeg
diff --git a/JavaScript/Music Player/images/music-6.jpeg b/JavaScript/Music Player/images/music-6.jpeg
diff --git a/JavaScript/Music Player/index.html b/JavaScript/Music Player/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Music Player | Ankit Ranjan</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+</head>
+<body>
+  <div class="wrapper">
+    <div class="top-bar">
+      <span>Now Playing</span>
+    </div>
+    <div class="img-area">
+      <img src="" alt="">
+    </div>
+    <div class="song-details">
+      <p class="name"></p>
+      <p class="artist"></p>
+    </div>
+    <div class="progress-area">
+      <div class="progress-bar">
+        <audio id="main-audio" src=""></audio>
+      </div>
+      <div class="song-timer">
+        <span class="current-time">0:00</span>
+        <span class="max-duration">0:00</span>
+      </div>
+    </div>
+    <div class="controls">
+      <i id="prev" class="material-icons">skip_previous</i>
+      <div class="play-pause">
+        <i class="material-icons play">play_arrow</i>
+      </div>
+      <i id="next" class="material-icons">skip_next</i>
+    </div>
+    <div class="music-list">
+  </div>
+
+  <script src="js/music-list.js"></script>
+  <script src="js/script.js"></script>
+
+</body>
+</html>
diff --git a/JavaScript/Music Player/js/music-list.js 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"
+  // }
+];
diff --git a/JavaScript/Music Player/js/script.js 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
diff --git a/JavaScript/Music Player/songs/music-2.mp3 b/JavaScript/Music Player/songs/music-2.mp3
diff --git a/JavaScript/Music Player/songs/music-3.mp3 b/JavaScript/Music Player/songs/music-3.mp3
diff --git a/JavaScript/Music Player/songs/music-4.mp3 b/JavaScript/Music Player/songs/music-4.mp3
diff --git a/JavaScript/Music Player/songs/music-5.mp3 b/JavaScript/Music Player/songs/music-5.mp3
diff --git a/JavaScript/Music Player/songs/music-6.mp3 b/JavaScript/Music Player/songs/music-6.mp3
diff --git a/JavaScript/Music Player/style.css 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;
+}