Как создать случайное воспроизведение музыки без повторений в JavaScript?

Оффтоп javascript
1

Проблема с воспроизведением музыки

Занимаюсь разработкой музыкального плеера на JavaScript. Нужно сделать так, чтобы при клике на жанр музыки проигрывалась случайная песня, но без повторений до тех пор, пока все композиции не будут проиграны.

Мой текущий код:

let currentTrack;
const shuffleTracks = musicList => {
    if (currentTrack) {
        currentTrack.pause();
        currentTrack.currentTime = 0;
    }
    let track = musicList[Math.floor(Math.random() * musicList.length)];
    track.play();
    currentTrack = track;
}

const rockButton = document.querySelector(".rock-genre")
rockButton.addEventListener("click", (event) => {
   let musicCollection = document.querySelectorAll(".rock-genre audio")
   shuffleTracks(musicCollection);
})

В чем проблема?

Сейчас песни повторяются слишком часто. Хочется реализовать логику как в Spotify - сначала проиграть все треки, потом начать заново. Пытался использовать filter для исключения уже проигранных композиций, но получаю ошибку что это не функция. Как правильно отслеживать проигранные треки и исключать их из случайной выборки?

2

Проблема в том, что querySelectorAll возвращает NodeList, а не Array. Я создаю отдельный массив для уже проигранных треков. Когда он достигает размера всех композиций - очищаю и начинаю сначала. В shuffleTracks добавляю проверку через includes() - ищу, пока не найдется неиспользованный трек.

3

querySelectorAll возвращает NodeList, не массив. Оберни через Array.from() или используй […musicCollection]. Можешь также создать отдельный массив для проигранных треков и сравнивать с ним. Как будешь уведомлять пользователя о конце цикла?

4

У меня была такая же задача. Сделай копию массива треков через slice() или spread оператор. При каждом воспроизведении удаляй трек через splice(). Массив пустой? Пересоздай заново. Намного проще, чем отслеживать отдельный массив проигранных композиций, и код чище.