Update audio.js

audio.js

@@ -1,3 +1,42 @@
+// Get all the add-to-playlist buttons
+const addToPlaylistButtons = document.querySelectorAll('.add-to-playlist');
+
+// Add event listener to each button
+addToPlaylistButtons.forEach(button => {
+  button.addEventListener('click', function() {
+    // Get the song details
+    const songCard = this.closest('.movie');
+    const songTitle = songCard.querySelector('.title').textContent;
+    const songDescription = songCard.querySelector('.description').textContent;
+    const songSrc = songCard.querySelector('source').getAttribute('src');
+    
+    // Create a new list item element
+    const newSongItem = document.createElement('li');
+    newSongItem.classList.add('song-item', 'row');
+    
+    // Create the song item content
+    const songItemContent = `
+      <div class="song-details col-10 col-md-11">
+        <p class="song-title">${songTitle}</p>
+        <p class="song-artist">${songDescription}</p>
+      </div>
+    `;
+    
+    // Set the content of the new list item
+    newSongItem.innerHTML = songItemContent;
+    
+    // Append the new song item to the playlist
+    const playlist = document.querySelector('.song-list');
+    playlist.appendChild(newSongItem);
+    
+    // Update the audio source and display the audio player
+    const audioPlayer = document.querySelector('#audio');
+    audioPlayer.querySelector('source').setAttribute('src', songSrc);
+    audioPlayer.classList.remove('d-none');
+  });
+});
+
+
 function validateSignup() {
     var username = document.forms["signupForm"]["username"].value;
     var password = document.forms["signupForm"]["password"].value;