My super simple playlist script. ~Oct 9th - Oct 13th

inspired of the simplistic design of msx' character playlists, i decided to create a fairly simple to use and create a playlist using data from an unordered list.

it includes...

• highlighting what song is currently playing using a class called active.
• automatically playing the next song after one is complete, though not required.
• full customization (with the prebuilt un/ordered list and audio of course).

it does not include, but may in the future...

• a shuffle toggle.
• loop functionality. (it may actually work, i just dont care enough to test it.)

this is the javascript that should either be in a script tag or a javascript file.

      
# Audio Playlist Player

document.addEventListener('DOMContentLoaded', function() {
    // Select all playlist items and the audio player
    const playlistItems = document.querySelectorAll('#playlist li');
    const audioPlayer = document.getElementById('audioPlayer');
    let currentSong = null; // Track the currently playing song

    // Add click event to each playlist item
    playlistItems.forEach(item => {
        item.addEventListener('click', function() {
            const source = this.getAttribute('data-src'); // Get the audio source from the clicked item

            // Check if the clicked song is different from the current one
            if (currentSong !== source) {
                // Pause the current song if there is one
                if (currentSong) {
                    audioPlayer.pause();
                    document.querySelector('.active')?.classList.remove('active'); // Remove active class from the previous song
                }
                audioPlayer.src = source; // Set the new song source
                audioPlayer.play();
                currentSong = source; // Update the current song
                this.classList.add('active'); // Highlight the currently playing song
            } else {
                // If the same song is clicked, pause it
                audioPlayer.pause();
                currentSong = null; // Reset current song
                this.classList.remove('active'); // Remove active class
            }
        });
    });

    // When the audio ends, play the next song
    audioPlayer.addEventListener('ended', function() {
        let nextSong = getNextSong(); // Get the next song
        if (nextSong) {
            audioPlayer.src = nextSong.getAttribute('data-src'); // Set the next song source
            audioPlayer.play();
            document.querySelector('.active')?.classList.remove('active'); // Remove active class from the current song
            nextSong.classList.add('active'); // Highlight the next song
            currentSong = nextSong.getAttribute('data-src'); // Update current song
        }
    });

    // Function to get the next song in the playlist.
    function getNextSong() {
        let currentIndex = Array.from(playlistItems).findIndex(item => item.getAttribute('data-src') === currentSong); // Find the index of the current song
        let nextIndex = (currentIndex + 1) % playlistItems.length; // Calculate the next index
        return playlistItems[nextIndex]; // Return the next song
    }
});
      

an example of how the playlist works in its simplest form (the purple highlighting being the active class being applied.)

• heavens night
• alone in the town

With this, you can customize it to your liking! the player is called with an id audioPlayer (case sensitive), the playlist (unordered or ordered list) is called with an id playlist, and the sources for where the audio comes from is data-src="yoururl" inside of the li tag. in other words, your code should look like...

    
       <ul id="playlist">
         <li data-src="URL"> song title </li>
         <li data-src="URL"> song title </li>
      </ul>
      
    <audio id="audioPlayer" controls></audio>
    <!-- remove controls, add autoplay, and or a source to the audio tag if needed. not sure how loop would work. -->
    
    <script>
        . . .
    

i would assume that you, the reader, already know how classes work. if you'd like, edit the .active class to your liking.

directly crediting me is not necessary, however, if someone asks where you got the code, direct them to me.

questions or concerns? email me. hqpentumbras@gmail.com