thinkswell · AdyaTech · Jan 28, 2026
diff --git a/MusicPlayer/AdyaTech/images/img1.jpg b/MusicPlayer/AdyaTech/images/img1.jpg
diff --git a/MusicPlayer/AdyaTech/images/img2.jpg b/MusicPlayer/AdyaTech/images/img2.jpg
diff --git a/MusicPlayer/AdyaTech/images/img3.jpg b/MusicPlayer/AdyaTech/images/img3.jpg
diff --git a/MusicPlayer/AdyaTech/images/img4.jpg b/MusicPlayer/AdyaTech/images/img4.jpg
diff --git a/MusicPlayer/AdyaTech/index.html b/MusicPlayer/AdyaTech/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script
+      src="https://kit.fontawesome.com/1935d064dd.js"
+      crossorigin="anonymous"
+    ></script>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <section class="main">
+      <div class="container box">
+        <div class="music">
+          <!-- Music player -->
+          <div class="music-player">
+            <!-- Header -->
+            <div class="header">
+              <i class="fas fa-music"></i>
+              <h2>Now Playing</h2>
+              <i class="fas fa-bars"></i>
+            </div>
+            <!-- Song Details -->
+            <div class="details">
+              <img class="track-image" src="./images/img1.jpg" alt="" />
+              <p class="title">Song Title</p>
+              <p class="artist">Artist Name</p>
+            </div>
+            <!-- Player Controls -->
+            <div class="controls">
+              <div class="song-timer">
+                <span class="current-time">00:12</span>
+                <span class="duration-time">04:10</span>
+              </div>
+              <!-- Song duration -->
+              <div class="duration">
+                <input
+                  type="range"
+                  class="duration-slider"
+                  min="0"
+                  max="100"
+                  value="0"
+                />
+              </div>
+              <!-- Buttons - Play, next and Prev -->
+              <div class="buttons">
+                <button class="prev">
+                  <i class="fas fa-step-backward"></i>
+                </button>
+                <button class="play">
+                  <i class="fas fa-play"></i>
+                </button>
+                <button class="next">
+                  <i class="fas fa-step-forward"></i>
+                </button>
+              </div>
+              <!-- Autoplay -->
+              <button class="play-all">
+                Play All <i class="fas fa-sync-alt"></i>
+              </button>
+              <!-- Volume -->
+              <div class="volume">
+                <p id="show-volume">50</p>
+                <i class="fas fa-volume-mute" id="volume-icon"></i>
+                <input type="range" id="volume" min="0" max="100" value="50" />
+              </div>
+            </div>
+          </div>
+
+          <!-- PlayList -->
+          <div class="music-playlist">
+            <!-- Header -->
+            <div class="header playlist-header">
+              <i class="fas fa-music"></i>
+              <h2>Playlist</h2>
+              <i class="fas fa-times"></i>
+            </div>
+            <!-- Playlist Item -->
+            <div class="playlist-div">
+              <!-- <div class="playlist">
+                <span class="song-index">1</span>
+                <p class="single-song">Song one</p>
+              </div> -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <script src="music.js"></script>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/MusicPlayer/AdyaTech/music.js b/MusicPlayer/AdyaTech/music.js
@@ -0,0 +1,26 @@
+let trackList = [
+  {
+    name: "A New Beginning",
+    path: "./music/bensound-anewbeginning.mp3",
+    img: "./images/img1.jpg",
+    singer: "Bensound.com",
+  },
+  {
+    name: "Hey",
+    path: "./music/bensound-hey.mp3",
+    img: "./images/img2.jpg",
+    singer: "Bensound.com",
+  },
+  {
+    name: "Little Idea",
+    path: "./music/bensound-littleidea.mp3",
+    img: "./images/img3.jpg",
+    singer: "Bensound.com",
+  },
+  {
+    name: "Sunny",
+    path: "./music/bensound-sunny.mp3",
+    img: "./images/img4.jpg",
+    singer: "Bensound.com",
+  },
+];
diff --git a/MusicPlayer/AdyaTech/music/bensound-anewbeginning.mp3 b/MusicPlayer/AdyaTech/music/bensound-anewbeginning.mp3
diff --git a/MusicPlayer/AdyaTech/music/bensound-hey.mp3 b/MusicPlayer/AdyaTech/music/bensound-hey.mp3
diff --git a/MusicPlayer/AdyaTech/music/bensound-littleidea.mp3 b/MusicPlayer/AdyaTech/music/bensound-littleidea.mp3
diff --git a/MusicPlayer/AdyaTech/music/bensound-sunny.mp3 b/MusicPlayer/AdyaTech/music/bensound-sunny.mp3
diff --git a/MusicPlayer/AdyaTech/script.js b/MusicPlayer/AdyaTech/script.js
@@ -0,0 +1,236 @@
+const play = document.querySelector(".play"),
+  previous = document.querySelector(".prev"),
+  next = document.querySelector(".next"),
+  //
+  trackImage = document.querySelector(".track-image"),
+  title = document.querySelector(".title"),
+  artist = document.querySelector(".artist"),
+  //
+  trackCurrentTime = document.querySelector(".current-time"),
+  trackDuration = document.querySelector(".duration-time"),
+  slider = document.querySelector(".duration-slider"),
+  //
+  showVolume = document.querySelector("#show-volume"),
+  volumeIcon = document.querySelector("#volume-icon"),
+  currentVolume = document.querySelector("#volume"),
+  //
+  autoPlayBtn = document.querySelector(".play-all"),
+  //
+  hamBurger = document.querySelector(".fa-bars"),
+  closeIcon = document.querySelector(".fa-times"),
+  //
+  musicPlaylist = document.querySelector(".music-playlist"),
+  pDiv = document.querySelector(".playlist-div"),
+  playList = document.querySelector(".playlist");
+
+let timer;
+let autoplay = 0;
+let indexTrack = 0;
+let songIsPlaying = false;
+let track = document.createElement("audio");
+
+//   All Event Listeners
+play.addEventListener("click", justPlay);
+next.addEventListener("click", nextSong);
+previous.addEventListener("click", prevSong);
+autoPlayBtn.addEventListener("click", autoPlayToggle);
+volumeIcon.addEventListener("click", muteSound);
+currentVolume.addEventListener("change", changeVolume);
+slider.addEventListener("change", changeDuration);
+track.addEventListener("timeupdate", songTimeUpdate);
+hamBurger.addEventListener("click", showPlayList);
+closeIcon.addEventListener("click", hidePlayList);
+
+// Load Tracks
+function loadTrack(indexTrack) {
+  clearInterval(timer);
+  resetSlider();
+
+  track.src = trackList[indexTrack].path;
+  trackImage.src = trackList[indexTrack].img;
+  title.innerHTML = trackList[indexTrack].name;
+  artist.innerHTML = trackList[indexTrack].singer;
+  track.load();
+
+  timer = setInterval(updateSlider, 1000);
+}
+loadTrack(indexTrack);
+
+// Play song or Pause song
+function justPlay() {
+  if (songIsPlaying == false) {
+    playSong();
+  } else {
+    pauseSong();
+  }
+}
+
+// Play Song
+function playSong() {
+  track.play();
+  songIsPlaying = true;
+  play.innerHTML = '<i class="fas fa-pause"></i>';
+}
+
+// Pause Song
+function pauseSong() {
+  track.pause();
+  songIsPlaying = false;
+  play.innerHTML = '<i class="fas fa-play"></i>';
+}
+
+// Next song
+function nextSong() {
+  if (indexTrack < trackList.length - 1) {
+    indexTrack++;
+    loadTrack(indexTrack);
+    playSong();
+  } else {
+    indexTrack = 0;
+    loadTrack(indexTrack);
+    playSong();
+  }
+}
+
+// prev song
+function prevSong() {
+  if (indexTrack > 0) {
+    indexTrack--;
+    loadTrack(indexTrack);
+    playSong();
+  } else {
+    indexTrack = trackList.length - 1;
+    loadTrack(indexTrack);
+    playSong();
+  }
+}
+
+// Mute Sound
+function muteSound() {
+  track.volume = 0;
+  showVolume.innerHTML = 0;
+  currentVolume.value = 0;
+}
+
+// Change Volume
+function changeVolume() {
+  showVolume.value = currentVolume.value;
+  track.volume = currentVolume.value / 100;
+}
+
+// Change Duration
+function changeDuration() {
+  let sliderPosition = track.duration * (slider.value / 100);
+  track.currentTime = sliderPosition;
+}
+
+// Auto Play
+function autoPlayToggle() {
+  if (autoplay == 0) {
+    autoplay = 1;
+    autoPlayBtn.style.background = "#db6400";
+  } else {
+    autoplay = 0;
+    autoPlayBtn.style.background = "#ccc";
+  }
+}
+
+// Reste Slider
+function resetSlider() {
+  slider.value = 0;
+}
+
+// Update Slider
+function updateSlider() {
+  let position = 0;
+
+  if (!isNaN(track.duration)) {
+    position = track.currentTime * (100 / track.duration);
+    slider.value = position;
+  }
+
+  if (track.ended) {
+    play.innerHTML = '<i class="fas fa-play"></i>';
+    if (autoplay == 1 && indexTrack < trackList.length - 1) {
+      indexTrack++;
+      loadTrack(indexTrack);
+      playSong();
+    } else if (autoplay == 1 && indexTrack == trackList.length - 1) {
+      indexTrack = 0;
+      loadTrack(indexTrack);
+      playSong();
+    }
+  }
+}
+
+// Update Current song time
+function songTimeUpdate() {
+  if (track.duration) {
+    let curmins = Math.floor(track.currentTime / 60);
+    let cursecs = Math.floor(track.currentTime - curmins * 60);
+    let durmins = Math.floor(track.duration / 60);
+    let dursecs = Math.floor(track.duration - durmins * 60);
+
+    if (dursecs < 10) {
+      dursecs = "0" + dursecs;
+    }
+    if (durmins < 10) {
+      durmins = "0" + durmins;
+    }
+    if (curmins < 10) {
+      curmins = "0" + curmins;
+    }
+    if (cursecs < 10) {
+      cursecs = "0" + cursecs;
+    }
+    trackCurrentTime.innerHTML = curmins + ":" + cursecs;
+    trackDuration.innerHTML = durmins + ":" + dursecs;
+  } else {
+    trackCurrentTime.innerHTML = "00" + ":" + "00";
+    trackDuration.innerHTML = "00" + ":" + "00";
+  }
+}
+
+// Show PlayList
+function showPlayList() {
+  musicPlaylist.style.transform = "translateX(0)";
+}
+// Hide PlayList
+function hidePlayList() {
+  musicPlaylist.style.transform = "translateX(-100%)";
+}
+
+// Display Tracks in playlist
+let counter = 1;
+function displayTracks() {
+  for (let i = 0; i < trackList.length; i++) {
+    console.log(trackList[i].name);
+    let div = document.createElement("div");
+    div.classList.add("playlist");
+    div.innerHTML = `
+        <span class="song-index">${counter++}</span>
+        <p class="single-song">${trackList[i].name}</p>
+    `;
+    pDiv.appendChild(div);
+  }
+  playFromPlaylist();
+}
+
+displayTracks();
+
+// Play song from the playlist
+function playFromPlaylist() {
+  pDiv.addEventListener("click", (e) => {
+    if (e.target.classList.contains("single-song")) {
+      //   alert(e.target.innerHTML);
+      const indexNum = trackList.findIndex((item, index) => {
+        if (item.name === e.target.innerHTML) {
+          return true;
+        }
+      });
+      loadTrack(indexNum);
+      playSong();
+      hidePlayList();
+    }
+  });
+}