Merge pull request #46 from NsCracker/fix/44-my-songs-button

my songs button fix
samratghosh291 · Oct 7, 2023 · 73023f2 · 73023f2
2 parents 866b395 + eca0b07
commit 73023f2
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 5 deletions.
diff --git a/assets/mysongsscript.js b/assets/mysongsscript.js
@@ -17,8 +17,32 @@ const songs = ['Mere Naam Tu','Deva Deva','Alkananda','Kesariya','Perfect','Prit
 // Keep track of song 
 let songIndex = songs.length - 1;
 
+// Load current song from localStorage
+function loadSongFromStorage() {
+  const currentSong = localStorage.getItem('currentSong');
+
+  if (currentSong) {
+    const { song } = JSON.parse(currentSong);
+    loadSong(song);
+    playSong();
+  }
+}
+
 // Initially load song details into DOM
-loadSong(songs[songIndex]);
+loadSongFromStorage();
+
+// Check if there is a stored songIndex and playback position in localStorage
+const savedIndex = localStorage.getItem('savedSongIndex');
+const savedPosition = localStorage.getItem('playbackPosition');
+
+// If both index and position are found, set them
+if (savedIndex !== null && savedPosition !== null) {
+  songIndex = parseInt(savedIndex);
+  audio.currentTime = parseFloat(savedPosition);
+}
+
+// Play the initial song in the background
+playSong();
 
 // Update song details
 function loadSong(song) {
@@ -32,17 +56,26 @@ function playSong() {
   musicContainer.classList.add('play');
   playBtn.querySelector('i.fas').classList.remove('fa-play');
   playBtn.querySelector('i.fas').classList.add('fa-pause');
-
+  
   audio.play();
 }
 
+// Save playback position when pausing or changing songs
+function savePlaybackPosition() {
+  localStorage.setItem('playbackPosition', audio.currentTime.toString());
+  localStorage.setItem('savedSongIndex', songIndex.toString());
+}
+
 // Pause song
 function pauseSong() {
   musicContainer.classList.remove('play');
   playBtn.querySelector('i.fas').classList.add('fa-play');
   playBtn.querySelector('i.fas').classList.remove('fa-pause');
 
   audio.pause();
+
+  // Save playback position when pausing
+  savePlaybackPosition();
 }
 
 // Previous song
@@ -177,7 +210,11 @@ audio.addEventListener('timeupdate', updateProgress);
 progressContainer.addEventListener('click', setProgress);
 
 // Song ends
-audio.addEventListener('ended', nextSong);
+audio.addEventListener('ended', () => {
+  nextSong();
+  // Save playback position when changing songs
+  savePlaybackPosition();
+});
 
 // Time of song
 audio.addEventListener('timeupdate', DurTime);
@@ -213,3 +250,11 @@ for (let i in songs) {
   songList.appendChild(layout);
   x++;
 }
+
+// Listen for page visibility change
+document.addEventListener('visibilitychange', () => {
+  // If the page becomes hidden, save the playback position
+  if (document.visibilityState === 'hidden') {
+    savePlaybackPosition();
+  }
+});
diff --git a/index.html b/index.html
@@ -26,7 +26,7 @@
             Home</a>
         </li>
         <li>
-          <a href="#">
+          <a href="./assets/mysongs.html">
             <i class="fas fa-solid fa-star"></i>
             My Songs</a>
         </li>

diff --git a/script.js b/script.js
@@ -20,20 +20,47 @@ let songIndex = songs.length - 1;
 // Initially load song details into DOM
 loadSong(songs[songIndex]);
 
+// Check if there is a stored songIndex and playback position in localStorage
+const savedIndex = localStorage.getItem('savedSongIndex');
+const savedPosition = localStorage.getItem('playbackPosition');
+
+// If both index and position are found, set them
+if (savedIndex !== null && savedPosition !== null) {
+  songIndex = parseInt(savedIndex);
+  audio.currentTime = parseFloat(savedPosition);
+}
+
+// Play the initial song in the background
+pauseSong();
+
 // Update song details
 function loadSong(song) {
   title.innerText = song;
   audio.src = `music/${song}.mp3`;
   cover.src = `images/${song}.jpg`;
 }
 
+// Save current song to localStorage
+function saveCurrentSong() {
+  localStorage.setItem('currentSong', JSON.stringify({ song: songs[songIndex] }));
+}
+
 // Play song
 function playSong() {
   musicContainer.classList.add('play');
   playBtn.querySelector('i.fas').classList.remove('fa-play');
   playBtn.querySelector('i.fas').classList.add('fa-pause');
 
   audio.play();
+
+  // Save current song to localStorage
+  saveCurrentSong();
+}
+
+// Save playback position when pausing or changing songs
+function savePlaybackPosition() {
+  localStorage.setItem('playbackPosition', audio.currentTime.toString());
+  localStorage.setItem('savedSongIndex', songIndex.toString());
 }
 
 // Pause song
@@ -43,6 +70,9 @@ function pauseSong() {
   playBtn.querySelector('i.fas').classList.remove('fa-pause');
 
   audio.pause();
+
+  // Save playback position when pausing
+  savePlaybackPosition();
 }
 
 // Previous song
@@ -177,7 +207,11 @@ audio.addEventListener('timeupdate', updateProgress);
 progressContainer.addEventListener('click', setProgress);
 
 // Song ends
-audio.addEventListener('ended', nextSong);
+audio.addEventListener('ended', () => {
+  nextSong();
+  // Save playback position when changing songs
+  savePlaybackPosition();
+});
 
 // Time of song
 audio.addEventListener('timeupdate', DurTime);
@@ -213,3 +247,12 @@ document.addEventListener('DOMContentLoaded', function () {
     return `${minutes}:${seconds.toString().padStart(2, '0')}`;
   }
 });
+
+
+// Listen for page visibility change
+document.addEventListener('visibilitychange', () => {
+  // If the page becomes hidden, save the playback position
+  if (document.visibilityState === 'hidden') {
+    savePlaybackPosition();
+  }
+});