Playlist music player

<link rel="stylesheet"
        href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<style>
.musicplayer {
    border: 1px solid black;
    margin-top: 15px;
}

.songtitle {
    padding: 5px;
    border-bottom: 1px solid black;
    height: 25px;
    display: flex;
    align-items: center;
    background-color: white;
}

.controls{
    font-size:20px !important;
    color: black;
    background-color: white;
    text-align: center;
    width: 100%;
    height: 25px;
}
i.fas:hover{
    cursor:help;
}

.controls td{
    padding: 5px;
}
</style>
<div class="musicplayer">
            <div>
                <marquee scrollamount="15" class="songtitle"></marquee>
            </div>

            <table class="controls">
                <tr>
                    <td>
                        <div class="prev-track" onclick="prevTrack()"><i class="fas fa-backward"></i></div>
                    </td>
                    <td>
                        <div class="playpause-track" onclick="playpauseTrack()" ><i class="fas fa-play"></i></div>
                    </td>
                    <td>
                        <div class="next-track" onclick="nextTrack()"><i class="fas fa-forward"></i></div>
                    </td>
                </tr>
            </table>

            <audio id="music" src=""></audio>
        </div>

<script>
    let track_name = document.querySelector(".songtitle");

    let playpause_btn = document.querySelector(".playpause-track");
    let next_btn = document.querySelector(".next-track");
    let prev_btn = document.querySelector(".prev-track");

    let track_index = 0;
    let isPlaying = false;

    // Create new audio element
    let curr_track = document.getElementById("music");

    // Define the tracks that have to be played
    let track_list = [
        {
            name:"artist and song name",
            path:""
        },
        {
            name:"artist and song name",
            path:""
        },
        {
            name:"artist and song name",
            path:""
        },
        {
            name:"artist and song name",
            path:""
        },
    ];

    function loadTrack(track_index) {
      // Load a new track
      curr_track.src = track_list[track_index].path;
      curr_track.load();

      // Update details of the track
      track_name.textContent = "playing " + (track_index + 1) + " of " + track_list.length + ": " + track_list[track_index].name;


      // Move to the next track if the current one finishes playing
      curr_track.addEventListener("ended", nextTrack);

    }

    function playpauseTrack() {
      if (!isPlaying) playTrack();
      else pauseTrack();
    }

    function playTrack() {
      curr_track.play();
      isPlaying = true;

      // Replace icon with the pause icon
      playpause_btn.innerHTML = '<i class="fas fa-pause"></i>';
    }

    function pauseTrack() {
      curr_track.pause();
      isPlaying = false;

      // Replace icon with the play icon
      playpause_btn.innerHTML = '<i class="fas fa-play"></i>';
    }

    function nextTrack() {
      if (track_index < track_list.length - 1)
        track_index += 1;
      else track_index = 0;
      loadTrack(track_index);
      playTrack();
    }

    function prevTrack() {
      if (track_index > 0)
        track_index -= 1;
      else track_index = track_list.length;
      loadTrack(track_index);
      playTrack();
    }

    // Load the first track in the tracklist
    loadTrack(track_index);
</script>