Update audio.js

audio.js

@@ -1,40 +1,40 @@
-// 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);
+function addToPlaylist() {
+    // Get information about the song
+    const songTitle = document.querySelector('.title').innerText;
+    const artist = 'Singer Name'; // You can replace this with the actual artist name
+    const audioSource = document.querySelector('#audio source').getAttribute('src');
+
+    // Create elements for the new song in the playlist
+    const playlist = document.querySelector('.playlist');
+
+    const newSongDiv = document.createElement('div');
+    newSongDiv.classList.add('song1');
+
+    const newSongTitle = document.createElement('h3');
+    newSongTitle.textContent = songTitle;
+
+    const newArtist = document.createElement('p');
+    newArtist.textContent = `Artist: ${artist}`;
+
+    const newAudio = document.createElement('audio');
+    newAudio.setAttribute('controls', '');
+
+    const audioSourceElem = document.createElement('source');
+    audioSourceElem.setAttribute('src', audioSource);
+    audioSourceElem.setAttribute('type', 'audio/mpeg');
+
+    newAudio.appendChild(audioSourceElem);
     
-    // 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');
-  });
-});
+    newSongDiv.appendChild(newSongTitle);
+    newSongDiv.appendChild(newArtist);
+    newSongDiv.appendChild(newAudio);
+
+    // Add the new song to the playlist
+    playlist.appendChild(newSongDiv);
+}
+
+
+
 
 
 function validateSignup() {