const DATA = [
  {
    "title": "jump",
    "src": "http://commondatastorage.googleapis.com/codeskulptor-assets/jump.ogg"
  },
  {
    "title": "paza-moduless",
    "src": "http://codeskulptor-demos.commondatastorage.googleapis.com/pang/paza-moduless.mp3"
  },
  {
    "title": "thrust",
    "src": "http://commondatastorage.googleapis.com/codeskulptor-assets/sounddogs/thrust.ogg"
  }
]

const soundsElement = document.querySelector("#sounds");

(async () => {
  const sounds = await getSounds();
  addSoundsToPage(sounds);
})();

async function getSounds() {
  return DATA;
}

let prevplayer;

function addSoundsToPage(sounds) {
  sounds.forEach((sound) => {
    const soundDiv = document.createElement("div");
    soundDiv.className = "sound";
    const soundTitle = document.createElement("h2");
    soundTitle.textContent = sound.title;
    soundDiv.appendChild(soundTitle);

    const player = document.createElement("audio");
    player.setAttribute("src", sound.src);
    soundDiv.appendChild(player);

    soundDiv.addEventListener("mousedown", () => {
      soundDiv.style.backgroundColor = "lightgray";
      if (prevplayer) prevplayer.pause();
      player.currentTime = 0;
      player.play();
      prevplayer = player;
    });

    soundDiv.addEventListener("mouseup", () => {
      soundDiv.style.backgroundColor = "";
    });

    soundsElement.appendChild(soundDiv);
  });
}