Animal Sounds App

Choose an animal:
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Animal Sounds App</title>
</head>

<body>
  <h1>Animal Sounds App</h1>
  <label for="animal-select">Choose an animal:</label>
  <select id="animal-select">
    <option value="">--Select--</option>
    <option value="cat">Cat</option>
    <option value="dog">Dog</option>
    <option value="cow">Cow</option>
    <option value="sheep">Sheep</option>
  </select>
  <br><br>
  <button id="play-sound">Play Sound</button>
  <audio id="audio-player"></audio>

  <script>
    const animalSelect = document.getElementById("animal-select");
    const audioPlayer = document.getElementById("audio-player");
    const playSoundBtn = document.getElementById("play-sound");

    playSoundBtn.addEventListener("click", () => {
      const selectedAnimal = animalSelect.value;

      switch (selectedAnimal) {
        case "cat":
          audioPlayer.src = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
          break;
        case "dog":
          audioPlayer.src = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3";
          break;
        case "cow":
          audioPlayer.src = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3";
          break;
        case "sheep":
          audioPlayer.src = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3";
          break;
        default:
          alert("Please select an animal");
          break;
      }

      audioPlayer.play();
    });
  </script>
</body>

</html>

ジョーク：Q. なぜ犬が働いているのを見ると悲しくなるの？ A. 散歩は彼らの唯一の休息だから！