Unable to pause audio after eventListener end

When first loading the code, the pause button works fine, it pauses the audio and changes the HTML class of the button inside, the button continues to work after using the previous/next buttons to go to another song, however after the eventListener is triggered the pause button stops working, it doesn’t pause the songs but the HTML inside still changes.

Edit: After a little bit of further debugging I found that the pause button is only able to pause the first time a track is loaded, once the audio.addEventListener('ended', nextTrack); is triggered it is unable to pause/play any audio.

let audio = new Audio;
let playing = false;
let playpause = document.getElementById('play-pause');
let root = document.documentElement;
let songname = document.getElementById('name');
let next = document.getElementById('next');
let prev = document.getElementById('previous');

let index = 0;

songlist = [
    {"name":"Love Again"
    ,"artist":"The Kid LAROI",
    "path":"resources/music/love-again.mp3",
    },
    {
    "name":"Always Do",
    "artist":"The Kid LAROI",
    "path":"resources/music/always-do.mp3",
    },
    {
        "name":"Bye Bye",
        "artist":"Juice WRLD",
        "path":"resources/music/bye-bye.mp3",
    },
    {
        "name":"Understand",
        "artist":"BoyWithUke",
        "path":"resources/music/understand.mp3",
    }
]

function progress_animation(){
    var currentTime = audio.currentTime;
    var duration = audio.duration;
    $('#progbar').stop(true, true).animate({ 'width': (currentTime + .25) / duration * 100 + '%' }, 250, 'linear');
    window.requestAnimationFrame(progress_animation);
    
};

function load(index){
    songname.textContent = `${songlist[index].artist} - ${songlist[index].name}`;
    audio.src = songlist[index].path;
    audio.load()
};

audio.addEventListener('ended', nextTrack);

$('#play-pause').click(function (){
    if (!playing) {
        Play()
        playing = true

    } else {
        Pause()
        playing = false
    }
});

function nextTrack(){
    if (index < songlist.length - 1) {
        index++;
    } else {
        index = 0;
    }
    load(index);
};

function prevTrack(){
    if (index > 0) {
        index--;
    } else {
        index = songlist.length - 1;
    }
    load(index);
};

function Play() {
    audio.play();
    playing = true;
    playpause.innerHTML = '<i class="fa-solid fa-pause"></i>';
};

function Pause() {
    audio.pause()
    playing = false;
    playpause.innerHTML = '<i class="fa-solid fa-play"></i>';
};

The pause button still changes its HTML class and sets the "playing" variable to false/true depending on the state of "playing" but doesn’t actually pause the song

>Solution :

It looks like you are calling the old.play() method when the Play button is clicked, but it should be audio.play() instead. Similarly, when the Pause button is clicked, you should call audio.pause() instead of old.pause(). Try changing those lines in your Play() and Pause() functions and see if that resolves the issue.

let currentAudio = null;

function load(index){
    songname.textContent = `${songlist[index].artist} - ${songlist[index].name}`;
    currentAudio = new Audio(songlist[index].path);
    currentAudio.load();
};

function Pause() {
    currentAudio.pause()
    playing = false;
    playpause.innerHTML = '<i class="fa-solid fa-play"></i>';
};

$('#play-pause').click(function (){
    if (!playing) {
        Play()
        playing = true
    } else {
        Pause()
        playing = false
    }
});