Как создать массив с музыкой и воспроизводить композиции по их положению в массиве при нажатии клавиш вперед и назад в javascript?

Я сделал плеер ,файлы которого лежат в корневой папке(если хотим поместить файлы в другую папку - просто меняем в теге source атрибут src например:"audio/lofi.mp3").Не делал кнопку назад она немного баганутая, завтра сяду и доделаю ! Может если у Вас есть идеи как её правильно реализовать , буду рад увидеть ваш код.

Логика следующая! Когда мы нажимаем на кнопку "Next" срабатывает функция, которая удаляет предыдущий тег "audio".Далее увеличиваем наш каунтер "n" для того чтобы идти по масиву ,и подставлять значения массива в атрибут src тега source.Когда мы дойдём до максимального значения длинны массива - кнопка станет не активной.

Перерисовывать тег "audio" не эффективно, но пока только так ,ведь если мы просто поменям значение атрибута src в теге source следующего трека мы не услышим. Сам не понимаю почему, буду разбираться!

Пока программа на костылях работает завтра думаю доделаю и скину рабочий код.

Ссылки для ознакомления с тегом audio: http://htmlbook.ru/html/audio

let next = document.getElementsByClassName('next');// Получаем кнопку "ВПЕРЁД"
let prev = document.getElementsByClassName('prev');// Получаем кнопку "НАЗАД"
let audio = document.getElementsByTagName('audio');// Получаем тег audio
let arr = ['dima.mp3', 'lofi.mp3']; //Массив с музыкикой
let n = 0;//Счётчик

next[0].addEventListener('click', goNext); // Вешаем обработчик на кнопку "ВПЕРЁД"

// Функция которая удаляет предыдущий тег audio
function deletePrevHTML () {
    document.body.removeChild(audio[0]);
}
// Функция которая рисует новый тег аудио с новой музыкой из массива
function createAudioHTML () {
    let newAudio = document.createElement('audio');
    newAudio.setAttribute('controls', 'controls');

    let sources = document.createElement('source');
    sources.setAttribute('src', arr[n]);
    sources.setAttribute('type', 'audio/mpeg');
    sources.setAttribute('class', 'track');

    let newLink = document.createElement('a');
    newLink.setAttribute('href', arr[n]);
    newLink.innerHTML = 'Скачайте музыку';


    newAudio.appendChild(sources);
    newAudio.appendChild(newLink);
    document.body.appendChild(newAudio);
}

// Функция которая перелистывает музыку из масива
function goNext() {
    deletePrevHTML();

    n++;

    if (n < arr.length) {
        createAudioHTML();
    } else {
        n = arr.length - 1;
        createAudioHTML();
        next[0].setAttribute('disabled', 'disabled');
    }
}



//Начало кнопки "НАЗАД"

/*prev[0].addEventListener('click', goPrevious);*/

/*function goPrevious() {
    deletePrevHTML();
    next[0].removeAttribute('disabled');

    n--;
    if (n <= arr.indexOf(arr[0])) {
        n = 0;
        prev[0].setAttribute('disabled', 'disabled');
        createAudioHTML();
    } else {
        createAudioHTML();
    }
debugger;

}*/

    <!--Вот HTML-->
    <audio controls>
        <source src="dima.mp3" type="audio/mpeg" class="track">
        Тег audio не поддерживается вашим браузером.
        <a href="audio/music.mp3">Скачайте музыку</a>.
    </audio>
    <button class="next">Next</button>
    <!--<button class="prev">Previous</button>-->