codemistic · Ishu070303 · Oct 18, 2022
diff --git a/musicplayer/README.md b/musicplayer/README.md
@@ -0,0 +1 @@
+# musicplayer
diff --git a/musicplayer/images/Cover letter.pdf b/musicplayer/images/Cover letter.pdf
diff --git a/musicplayer/images/Decendents.png b/musicplayer/images/Decendents.png
diff --git a/musicplayer/images/Mood.png b/musicplayer/images/Mood.png
diff --git a/musicplayer/images/butter.png b/musicplayer/images/butter.png
diff --git a/musicplayer/images/killme.png b/musicplayer/images/killme.png
diff --git a/musicplayer/images/leave_the_door_open.png b/musicplayer/images/leave_the_door_open.png
diff --git a/musicplayer/index.html b/musicplayer/index.html
@@ -0,0 +1,40 @@
+<!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">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" 
+    referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="style.css">
+    <title>Music Player</title>
+</head>
+<body>
+     <h1>Music Player</h1>
+     <div class="music-container">
+         <div class="music-info">
+             <h4 id="title">Butter</h4>
+             <div class="progress-container">
+                 <div class="progress"></div>
+             </div>
+         </div>
+         <audio src="../music/butter.mp3" id="audio"></audio>
+         <div class="img-container">
+             <img src="../images/butter.png" alt="music-cover " id="cover">
+         </div>
+
+         <div class="navigation">
+             <button id="prev" class="action-btn">
+                 <i class="fas fa-backward"></i>
+             </button>
+             <button id="play" class="action-btn action-btn-big">
+                 <i class="fas fa-play"></i>
+             </button>
+             <button id='next' class="action-btn">
+                <i class="fas fa-forward"></i>
+             </button>
+         </div>
+    </div>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/musicplayer/index.js b/musicplayer/index.js
@@ -0,0 +1,111 @@
+const musicsContainer=document.querySelector('.music-container')
+const playBtn=document.querySelector('#play');
+const prevBtn=document.querySelector('#prev');
+const nextBtn=document.querySelector('#next');
+const audio=document.querySelector('#audio')
+const progress=document.querySelector('.progress')
+const progressContainer=document.querySelector('.progress-container')
+const title =document.querySelector('#title')
+const cover=document.querySelector('#cover')
+
+//song title
+const songs=['butter','killme','Decendents','leave_the_door_open','mood']
+
+//keep track of songs(default)
+let songIndex =4;
+
+//intaialy load song info DOM
+loadSongs(songs[songIndex]);
+
+//update song details
+function loadSongs(song){
+    title.innerHTML= song
+    audio.src =`music/${song}.mp3`;
+    cover.src =`images/${song}.png`
+}
+
+function playSong(){
+    musicsContainer.classList.add('play')
+    playBtn.querySelector('i.fas').classList.remove('fa-play')
+    playBtn.querySelector('i.fas').classList.add('fa-pause')
+
+    //audio playing
+    audio.play();
+
+}
+
+function pauseSong(){
+    musicsContainer.classList.remove('play')
+    playBtn.querySelector('i.fas').classList.add('fa-play')
+    playBtn.querySelector('i.fas').classList.remove('fa-pause')
+
+    //audio paused
+    audio.pause();
+}
+
+//prev song function
+function prevsong(){
+    songIndex--;
+
+    if(songIndex < 0){
+        songIndex = songs.length - 1
+    }
+
+    loadSongs(songs[songIndex]);
+
+    playSong();
+}
+
+//next song function
+function nextsong(){
+    songIndex++;
+
+    if(songIndex > songs.length - 1){
+        songIndex = 0
+    }
+
+    loadSongs(songs[songIndex]);
+
+    playSong();
+
+}
+
+//progress
+function updateProgress(e){
+    const {duration,currentTime}=e.srcElement;
+    const progresspercent = (currentTime / duration)*100;
+    progress.style.width=`${progresspercent}%`
+
+}
+
+//controling progress
+function setProgress(e){
+  const width =this.clientWidth;
+  const clientX =e.offsetX
+  const duration=audio.duration;
+
+
+  audio.currentTime=(clientX/width)*duration;
+
+}
+
+//eventlistner
+playBtn.addEventListener('click',()=>{
+    const isPlaying =musicsContainer.classList.contains('play')
+
+    if(isPlaying){
+        pauseSong()
+    }
+    else{
+        playSong()
+    }
+});
+
+//change song event
+prevBtn.addEventListener('click',prevsong);
+nextBtn.addEventListener('click',nextsong);
+
+audio.addEventListener('timeupdate',updateProgress);
+
+progressContainer.addEventListener('click', setProgress);
+audio.addEventListener('ended',nextsong);
diff --git a/musicplayer/music/Decendents.mp3 b/musicplayer/music/Decendents.mp3
diff --git a/musicplayer/music/butter.mp3 b/musicplayer/music/butter.mp3
diff --git a/musicplayer/music/killme.mp3 b/musicplayer/music/killme.mp3
diff --git a/musicplayer/music/mood.mp3 b/musicplayer/music/mood.mp3
diff --git a/musicplayer/style.css b/musicplayer/style.css
@@ -0,0 +1,143 @@
+@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@300&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-image: linear-gradient(
+    0deg,
+    rgba(247, 247, 247, 1) 23.8%,
+     rgba(255,255,51)92%
+  );
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: '', cursive;
+  margin: 0;
+
+}
+
+
+.music-container {
+  background-color: #fff;
+  border-radius: 15px;
+  box-shadow: 0 20px 20px 0 rgba(255, 255, 102, 0.6);
+  display: flex;
+  padding: 20px 30px;
+  position: relative;
+  margin: 100px 0;
+  z-index: 10;
+}
+
+.img-container {
+  position: relative;
+  width: 110px;
+}
+
+.img-container::after {
+  content: '';
+  background-color: #fff;
+  border-radius: 50%;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  transform: translate(-50%, 50%);
+}
+
+.img-container img {
+  border-radius: 50%;
+  object-fit: cover;
+  height: 110px;
+  width: inherit;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  animation: rotate 3s linear infinite;
+
+  animation-play-state: paused;
+}
+
+.music-container.play .img-container img {
+  animation-play-state: running;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.action-btn {
+  background-color: #fff;
+  border: 0;
+  color: #dfdbdf;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 10px;
+  margin: 0 20px;
+}
+
+.action-btn.action-btn-big {
+  color: #cdc2d0;
+  font-size: 30px;
+}
+
+.action-btn:focus {
+  outline: 0;
+}
+
+.music-info {
+  background-color: rgba(255, 255,102, 0.5);
+  border-radius: 15px 15px 0 0;
+  position: absolute;
+  top: 0;
+  left: 20px;
+  width: calc(100% - 40px);
+  padding: 10px 10px 10px 150px;
+  opacity: 0;
+  transform: translateY(0%);
+  transition: transform 0.3s ease-in, opacity 0.3s ease-in;
+  z-index: 0;
+}
+.music-info h4{
+    margin: 0;
+}
+
+.music-container.play .music-info {
+  opacity: 1;
+  transform: translateY(-100%);
+}
+
+.progress-container{
+    background: white;
+    border-radius: 5px;
+    cursor: pointer;
+    margin: 10px 0;
+    height: 4px;
+    width: 100%;
+
+}
+
+.progress{
+    background-color: black;
+    border-radius: 5px;
+    height: 100%;
+    width: 50%;
+    transition: width 0.1s linear;
+}