画像と音声のアプリ

下記の6つの画像をクリックすると、録音した音声を再生できます。
画像1を選択してください
画像2を選択してください
画像3を選択してください
画像4を選択してください
画像5を選択してください
画像6を選択してください
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>画像と音声のアプリ</title>
  </head>
  <body>
    <h1>画像と音声のアプリ</h1>
    <p>下記の6つの画像をクリックすると、録音した音声を再生できます。</p>
    <img id="img1" src="default.jpg" alt="画像1">
    <img id="img2" src="default.jpg" alt="画像2">
    <img id="img3" src="default.jpg" alt="画像3">
    <img id="img4" src="default.jpg" alt="画像4">
    <img id="img5" src="default.jpg" alt="画像5">
    <img id="img6" src="default.jpg" alt="画像6">
    
    <script>
      let audios = {};

      function handleImageClick(event) {
        let audio = audios[event.target.id];
        if (audio) {
          audio.currentTime = 0;
          audio.play();
        } else {
          alert("音声がありません！");
        }
      }

      function handleFileUpload(event) {
        let input = event.target;
        let reader = new FileReader();
        reader.onload = function() {
          let img = document.getElementById(input.id + "-img");
          img.src = reader.result;
        }
        reader.readAsDataURL(input.files[0]);

        let fileLabel = document.querySelector(`label[for=${input.id}]`);
        fileLabel.innerHTML = `画像を変更しました（${input.files[0].name}）`;

        let audioControl = document.getElementById(input.id + "-audio");
        let audio = audios[input.id];
        if (audio) {
          URL.revokeObjectURL(audio.src);
          audio.src = URL.createObjectURL(input.files[1]);
        } else {
          audio = new Audio();
          audio.src = URL.createObjectURL(input.files[1]);
          audios[input.id] = audio;
        }
        audioControl.style.display = "block";
      }

      function handleAudioDelete(event) {
        let input = document.getElementById(event.target.dataset.inputId);
        let img = document.getElementById(input.id + "-img");
        let audio = audios[input.id];
        URL.revokeObjectURL(audio.src);
        audio.src = null;
        audio.load();

        let fileLabel = document.querySelector(`label[for=${input.id}-image]`);
        fileLabel.innerHTML = `画像を選択してください`;

        img.src = "default.jpg";
        event.target.style.display = "none";
      }

      let imageInputs = document.querySelectorAll("input[type=file]");
      imageInputs.forEach(input => {
        input.addEventListener("change", handleFileUpload);
      });

      let audioControls = document.querySelectorAll(".audio-control");
      audioControls.forEach(audioControl => {
        audioControl.addEventListener("click", handleAudioDelete);
      });

      let images = document.querySelectorAll("img");
      images.forEach(image => {
        image.addEventListener("click", handleImageClick);
      });
    </script>

    <style>
      img {
        width: 200px;
        height: 200px;
        margin-right: 10px;
      }
      label {
        display: block;
        margin-bottom: 5px;
      }
      .audio-control {
        display: none;
        margin-top: 5px;
      }
    </style>

    <div>
      <label for="image1-file">画像1を選択してください</label>
      <input type="file" id="image1-file">
      <br>
      <audio id="image1-audio" controls class="audio-control" data-input-id="image1-file"></audio>
      <button id="image1-audio-delete" class="audio-control" data-input-id="image1-file">音声を削除</button>
    </div>
    
    <div>
      <label for="image2-file">画像2を選択してください</label>
      <input type="file" id="image2-file">
      <br>
      <audio id="image2-audio" controls class="audio-control" data-input-id="image2-file"></audio>
      <button id="image2-audio-delete" class="audio-control" data-input-id="image2-file">音声を削除</button>
    </div>
    
    <div>
      <label for="image3-file">画像3を選択してください</label>
      <input type="file" id="image3-file">
      <br>
      <audio id="image3-audio" controls class="audio-control" data-input-id="image3-file"></audio>
      <button id="image3-audio-delete" class="audio-control" data-input-id="image3-file">音声を削除</button>
    </div>

    <div>
      <label for="image4-file">画像4を選択してください</label>
      <input type="file" id="image4-file">
      <br>
      <audio id="image4-audio" controls class="audio-control" data-input-id="image4-file"></audio>
      <button id="image4-audio-delete" class="audio-control" data-input-id="image4-file">音声を削除</button>
    </div>

    <div>
      <label for="image5-file">画像5を選択してください</label>
      <input type="file" id="image5-file">
      <br>
      <audio id="image5-audio" controls class="audio-control" data-input-id="image5-file"></audio>
      <button id="image5-audio-delete" class="audio-control" data-input-id="image5-file">音声を削除</button>
    </div>

    <div>
      <label for="image6-file">画像6を選択してください</label>
      <input type="file" id="image6-file">
      <br>
      <audio id="image6-audio" controls class="audio-control" data-input-id="image6-file"></audio>
      <button id="image6-audio-delete" class="audio-control" data-input-id="image6-file">音声を削除</button>
    </div>
  </body>
</html>