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

Оффтоп javascript
1

Привет, ребята! У меня возникла проблема с аудиоплеером на сайте. Нужно сделать так, чтобы при нажатии на кнопку воспроизведения новой песни, текущая останавливалась. Вот примерный код, который я пытаюсь реализовать:

document.querySelector('.плейлист').addEventListener('click', function(e) {
  if (e.target.classList.contains('кнопка-плей')) {
    if (текущийТрек) {
      текущийТрек.pause();
    }
    
    let новыйТрек = new Audio(e.target.dataset.src);
    новыйТрек.play();
    текущийТрек = новыйТрек;
  }
});

Но что-то не работает как надо. Может кто-нибудь подсказать, где я ошибся? Буду благодарен за любую помощь!

2

А ты пробовал использовать метод stop() вместо pause()? Он полностью останавливает воспроизведение. Еще можно создать один глобальный объект Audio и просто менять ему src при клике. Так точно не будет проблем с одновременным воспроизведением. И проверь, что у тебя правильные классы для кнопок и плейлиста, а то может событие не срабатывать.

3

Твой код выглядит нормально, но есть пара моментов. Попробуй добавить текущийТрек.currentTime = 0 перед pause(), чтобы сбросить позицию. И проверь, что dataset.src действительно содержит корректный путь к аудио. Еще советую использовать const вместо let для новыйТрек. А вообще, лучше создать массив треков и управлять им, так код будет чище и гибче. Если все еще не работает, может проблема в событиях или селекторах.

4

у меня была похожая проблема, решил ее немного по-другому. вместо создания нового объекта Audio каждый раз, я сделал один глобальный плеер:

const player = new Audio();

document.querySelector('.плейлист').addEventListener('click', e => {
  if (e.target.matches('.кнопка-плей')) {
    player.src = e.target.dataset.src;
    player.play();
  }
});

так проще управлять воспроизведением и не нужно беспокоиться о старых треках. плюс экономит память. может тебе тоже подойдет такой вариант?