king04aman · Reshav-Roushan · Jun 21, 2025
diff --git a/projects/music-player-reshav/All-In-One-JavaScript-Projects b/projects/music-player-reshav/All-In-One-JavaScript-Projects
diff --git a/projects/music-player-reshav/index.html b/projects/music-player-reshav/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Blurred Music Player</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    body::before {
+      content: "";
+      background: url('https://via.placeholder.com/600x600.png?text=🎶') no-repeat center center / cover;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -2;
+      filter: blur(20px);
+      transform: scale(1.1);
+    }
+    body::after {
+      content: "";
+      background: rgba(0, 0, 0, 0.6);
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: -1;
+    }
+  </style>
+</head>
+<body class="min-h-screen flex items-center justify-center p-6 text-white font-sans">
+
+  <div class="bg-white/10 border border-white/20 backdrop-blur-xl rounded-3xl shadow-2xl p-6 max-w-sm w-full transition duration-300 hover:shadow-[0_0_30px_5px_rgba(236,72,153,0.3)]">
+
+    <!-- Album Art -->
+    <div class=" album overflow-hidden rounded-2xl mb-6 shadow-lg">
+      <img id="img" src="" alt="Album Cover" class="w-full object-cover">
+    </div>
+
+    <!-- Audio Element (hidden but functional) -->
+     <audio id="audio" src="songs\music.mp3"></audio>
+
+    <!-- Track Info -->
+    <div class="text-center mb-6">
+      <h2 id="track-title" class="text-2xl font-bold text-pink-400 tracking-tight">Levitating</h2>
+      <p id="artist" class="text-gray-300 text-sm">Dua Lips</p>
+    </div>
+
+    <!-- Progress Bar -->
+    <div class="mb-4">
+      <div class=" time flex justify-between text-xs text-gray-400 mb-1">
+        <p><span id="current">00:00</span></p>
+        <span id="duration">3:24</span>
+      </div>
+      <div id="progressContainer" class="h-2 w-full bg-gray-700 rounded-full overflow-hidden">
+        <div id="progress" class="h-2 w-0 bg-gradient-to-r from-pink-400 to-purple-500 rounded-full animate-pulse"></div>
+      </div>
+    </div>
+
+    <!-- Controls -->
+    <div class="flex items-center justify-center gap-6 mt-6">
+      <!-- Back -->
+      <button class="hover:scale-110 hover:text-pink-400 transition">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M11 17l-6-5 6-5v10zm-6-5v5H3V8h2v4z" />
+        </svg>
+      </button>
+
+      <!-- Play -->
+      <button id="playBtn" class=" bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600 text-white p-4 rounded-full shadow-lg shadow-pink-500/30 transition hover:scale-110">
+        <svg id="playIcon" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M6 4l12 6-12 6V4z" />
+        </svg>
+      </button>
+
+      <!-- Next -->
+      <button class="hover:scale-110 hover:text-pink-400 transition">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M9 17V7l6 5-6 5zm6-5V7h2v10h-2z" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Volume -->
+    <div class="mt-6 text-center text-gray-400 text-sm">
+      <svg class="w-5 h-5 inline-block mr-1" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+        <path d="M11 5L6 9H2v6h4l5 4V5zM17.3 8.7a5 5 0 010 6.6M20.54 6.46a9 9 0 010 11.08" />
+      </svg>
+      Volume
+    </div>
+
+  </div>
+
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/projects/music-player-reshav/script.js b/projects/music-player-reshav/script.js
@@ -0,0 +1,89 @@
+const audio = document.getElementById('audio');
+const playBtn = document.getElementById('playBtn');
+const playIcon = document.getElementById('playIcon');
+const progress = document.getElementById('progress');
+const progressContainer = document.getElementById('progressContainer');
+const time = document.getElementsByClassName('time')
+const current = document.getElementById('current');
+const duration = document.getElementById('duration');
+const img = document.getElementById('img');
+const title = document.getElementById('track-title');
+const artist = document.getElementById('artist');
+
+
+// Toggle play/pause
+playBtn.addEventListener('click', function () {
+  if (audio.paused) {
+    audio.play();
+    playIcon.innerHTML = '<path d="M6 4h4v12H6zM12 4h4v12h-4z" />';
+  }
+  else {
+    audio.pause();
+    playIcon.innerHTML = '<path d="M6 4l12 6-12 6V4z" />';
+  }
+});
+
+// Update progress bar
+audio.addEventListener('timeupdate', () => {
+  const percent = (audio.currentTime / audio.duration) * 100;
+  progress.style.width = `${percent}%`;
+});
+
+
+audio.addEventListener('play', () => {
+  img.src = "songs/img/MV5BMTE5MzM4MzAtMzE4Mi00NTNiLTk3ODktNGQ4MjQ2MzNlYjRlXkEyXkFqcGc@.jpg";
+
+  artist.textContent = "";
+});
+
+function loadSong(song) {
+  audio.src = song.audioSrc;
+  img.src = song.imgSrc;
+  title.textContent = song.title;
+  artist.textContent = song.artist;
+  audio.play();
+}
+
+// Example usage:
+loadSong({
+  audioSrc: "songs/music.mp3",
+  imgSrc: "songs/img/MV5B...jpg",
+  title: "Girls Like you",
+  artist: "Maroon-5"
+});
+
+
+
+
+function formatTime(seconds) {
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  const m = mins < 10 ? `0${mins}` : mins;
+  const s = secs < 10 ? `0${secs}` : secs;
+  return `${m}:${s}`;
+}
+
+audio.addEventListener("timeupdate", () => {
+  current.textContent = formatTime(audio.currentTime);
+});
+// Load total duration once it's available
+audio.addEventListener("loadedmetadata", () => {
+  duration.textContent = formatTime(audio.duration);
+});
+
+
+//seeking anywhere
+progressContainer.addEventListener('click', (e) => {
+  const width = progressContainer.clientWidth;
+  const clickX = e.offsetX;
+  const duration = audio.duration;
+
+  audio.currentTime = (clickX / width) * duration;
+
+});
+
+
+
+
+
+
diff --git a/.../songs/img/MV5BMTE5MzM4MzAtMzE4Mi00NTNiLTk3ODktNGQ4MjQ2MzNlYjRlXkEyXkFqcGc@.jpg b/.../songs/img/MV5BMTE5MzM4MzAtMzE4Mi00NTNiLTk3ODktNGQ4MjQ2MzNlYjRlXkEyXkFqcGc@.jpg
diff --git a/projects/music-player-reshav/songs/music.mp3 b/projects/music-player-reshav/songs/music.mp3