Переключение музыки на JS по клику на кнопку

Question

У меня вопрос - как сделать переключение трека по нажатию на клавишу? В данный момент функция вроде бы работает (ссылки на треки читаются из массива sounds). Но в итоге музыка не меняется, играет один и тот же первый трек, а в консоли выдаётся ошибка - "GET http://127.0.0.1:60912/(sound/tommy-tallarico-jazzy-tune.ogg) 404 (Not Found)". То есть, функция не видит данный трек, хотя он лежит в этой папке и адрес указан вроде верно. В разметке ни один из треков не прописан, если что. Пробовал прописывать всё в разметке - ситуация не меняется.

Что самое интересное, если подгружать трек не из массива, а создать отдельную функцию с данным треком, то он проигрывается, то есть он становится виден. Но мне нужно сделать именно, что бы музон грузился из массива адресов и менялся при переключении. То есть, нажимаем на плэй - играет первый трек. Далее выполняем определённые действия, после которых музыка пропадает. Далее нажимаем - переключить трек. Нажимаем плэй - играет уже второй трек. Как добиться такого результата?

//Код функции проигрывания первого трека: 
let playMusic = function() {
  mainAudio.src = 'sound/tommy-tallarico-beach-music.ogg';
  mainAudio.autoplay = true;
  mainAudio.loop = true;
  mainAudio.volume = 0.3;
}

//Код кнопки play (включение трека): 
puzzleButton.addEventListener('click',
  function() {
    playMusic();
  });

//Массив с треками и цикл, который должен перебирать треки: 
let sounds = ['sound/tommy-tallarico-jazzy-tune.ogg', 'sound/tommy-tallarico-play-da-blues.ogg', 'sound/tommy-tallarico-wall-tune.ogg', 'sound/tommy-tallarico-western-tune.ogg',
  'sound/tommy-tallarico-beach-music.ogg'
];
let g = 0;

function changeBackgroundMusic() {
  if (g === sounds.length) {
    g = 0;
  }
  mainAudio.src = `(${sounds[g]})`;
  g++;
};

//Кнопка смены трека: 
changeButton.addEventListener('click', function() {
  changeBackgroundMusic();
});

Answer 1

Всем спасибо! Заработало после следующих изменений:

//Тут убрал круглые скобки

function changeBackgroundMusic() {
  if(g === sounds.length) {
    g = 0;
  }
  mainAudio.src = `${sounds[g]}`;
  g++;
};

//В эту функцию, в опцию mainAudio тоже прописал значение из цикла массивов
let playMusic = function() {
    mainAudio.src = `${sounds[g]}`; // Указываем путь к звуку "клика"
    mainAudio.autoplay = true; // Автоматически запускаем
    mainAudio.loop = true;
    mainAudio.volume = 0.3;
}

// На кнопку смены трека повесил функцию stopMusic, которая останавливает автоматическое включение трека
changeButton.addEventListener('click', function() {
  changeBackgroundMusic();
  stopMusic();
});

Теперь алгоритм правильный: Включение проигрывания трека - остановка трека - смена трека и предотвращение автоматического проигрывания - включение уже нового трека.

БЛОГ НА HUSL

Переключение музыки на JS по клику на кнопку

Ответы (1 шт):