Как сделать, чтобы при нажатии на кнопку плэй, появлялся значок паузы и играла музыка?

Question

[Роман Тузов]

На скрине видно, что если строчка с названием песни, автором и т.д. Когда нажимаешь на кнопку плэй, то должна появляться кнопка паузы и играть песня, а при нажатии на паузу, возвращается кнопка плэй и перестаёт играть музыка. Можете помочь сделать это из уже немного заготовленного кода, а после помощи посоветовать сайт, где можно хорошо научиться JS. Только для начала, пожалуйста, помогите с моим вопросом. Вот код: https://codepen.io/HutsonR/pen/abbjRpw

Answer 1

[0xD34F]

document.querySelector('.music-album').addEventListener('click', e => {
  const { target: t, currentTarget: ct } = e;
  const playButton = ct.querySelector('.play_button');
  const stopButton = ct.querySelector('.stop_button');
  const state =
    playButton.contains(t) ?  true :
    stopButton.contains(t) ? false :
                              null;
  if (state !== null) {
    ct.querySelector('audio')[state ? 'play' : 'pause']();
    playButton.style.display = state ? 'none' : 'block';
    stopButton.style.display = state ? 'block' : 'none';
  }
});

Comments

[Роман Тузов]

Большое спасибо! Сделал по-другому, а работало только первая песня, теперь работает всё. )