gomesite/js/gomesong.js

function get_audio(music_box) {
  return music_box.querySelector('audio');
}

const music_boxes = document.getElementsByClassName('music-box');
for (const music_box of music_boxes) {
  music_box.addEventListener('click', () => {
    const audio = get_audio(music_box);
    music_box.classList.remove('done');
    if (audio.paused) {
      // pause all other music boxes
      for (const music_box of music_boxes) {
        music_box.classList.remove('playing');
        get_audio(music_box).pause();
      }
      music_box.classList.add('playing');
      audio.play();
    } else {
      music_box.classList.remove('playing');
      audio.pause();
    }
  });
  get_audio(music_box).addEventListener('ended', () => {
    music_box.classList.remove('playing');
    music_box.classList.add('done');
    console.info('done')
  });
}