Spaces:

soiz1
/

Radio-Exercise_No.1

Running

App Files Files Community

soiz1 commited on Apr 11

Commit

0c4d0b6

verified ·

1 Parent(s): 1ae3bbc

Update index.html

Browse files

Files changed (1) hide show

index.html +14 -95

index.html CHANGED Viewed

@@ -36,16 +36,11 @@
     input[type="number"] {
       width: 60px;
     }
-    #audioWarning {
-      color: red;
-      display: none;
-    }
   </style>
 </head>
 <body>
   <h1>動画プレイヤー</h1>
   <video id="videoPlayer" src="v.mp4" controls></video>
-  <p id="audioWarning">音量増幅機能を使用するには、動画を再生してください</p>
   <div class="controls">
     <div class="control-group">
@@ -56,8 +51,8 @@
     <div class="control-group">
       <label for="volumeRange">音量：</label>
-      <input type="range" id="volumeRange" min="0" max="1000" step="1" value="100">
-      <input type="number" id="volumeInput" min="0" max="1000" step="1" value="100">%
     </div>
     <div class="control-group">
@@ -67,6 +62,7 @@
     <button onclick="goFullscreen()">全画面</button>
   </div>
 <script>
   const video = document.getElementById('videoPlayer');
   const speedRange = document.getElementById('speedRange');
@@ -74,40 +70,9 @@
   const volumeRange = document.getElementById('volumeRange');
   const volumeInput = document.getElementById('volumeInput');
   const loopCheckbox = document.getElementById('loopCheckbox');
-  const audioWarning = document.getElementById('audioWarning');
-  let audioContext = null;
-  let source = null;
-  let gainNode = null;
-  let audioInitialized = false;
-  function setupAudio() {
-    try {
-      audioContext = new (window.AudioContext || window.webkitAudioContext)();
-      source = audioContext.createMediaElementSource(video);
-      gainNode = audioContext.createGain();
-      source.connect(gainNode);
-      gainNode.connect(audioContext.destination);
-      updateVolume(volumeRange.value);
-      audioInitialized = true;
-      audioWarning.style.display = 'none';
-    } catch (e) {
-      const msg = "音量増幅機能が使用できません: " + e.message;
-      audioWarning.textContent = msg;
-      audioWarning.style.display = 'block';
-      alert(msg);
-    }
-  }
   function updatePlaybackRate(value) {
     const speed = parseFloat(value);
-    if (isNaN(speed) || speed <= 0) {
-      const msg = "再生速度が不正です: " + value;
-      alert(msg);
-      return;
-    }
     speedInput.value = speed;
     speedRange.value = speed;
     video.playbackRate = speed;
@@ -115,29 +80,9 @@
   function updateVolume(value) {
     const volume = parseFloat(value);
-    if (isNaN(volume) || volume < 0) {
-      const msg = "音量の値が不正です: " + value;
-      alert(msg);
-      return;
-    }
     volumeInput.value = volume;
     volumeRange.value = volume;
-    if (audioInitialized && gainNode) {
-      try {
-        gainNode.gain.value = volume / 100;
-      } catch (e) {
-        const msg = "音量設定中にエラーが発生しました: " + e.message;
-        alert(msg);
-      }
-    } else {
-      try {
-        video.volume = Math.min(volume / 100, 1);
-      } catch (e) {
-        const msg = "標準音量設定に失敗しました: " + e.message;
-        alert(msg);
-      }
-    }
   }
   ['input', 'change', 'mouseup'].forEach(eventName => {
@@ -162,46 +107,20 @@
   });
   function goFullscreen() {
-    try {
-      if (video.requestFullscreen) {
-        video.requestFullscreen();
-      } else if (video.webkitRequestFullscreen) {
-        video.webkitRequestFullscreen();
-      } else if (video.msRequestFullscreen) {
-        video.msRequestFullscreen();
-      } else {
-        alert("全画面表示はこのブラウザではサポートされていません。");
-      }
-    } catch (e) {
-      alert("全画面モードに失敗しました: " + e.message);
     }
   }
-  video.addEventListener('play', () => {
-    if (!audioInitialized) {
-      setupAudio();
-    } else if (audioContext && audioContext.state === 'suspended') {
-      audioContext.resume().catch(e => {
-        const msg = "AudioContextの再開に失敗しました: " + e.message;
-        alert(msg);
-      });
-    }
-  });
   video.addEventListener('loadedmetadata', () => {
-    try {
-      updatePlaybackRate(speedRange.value);
-      updateVolume(volumeRange.value);
-      video.loop = loopCheckbox.checked;
-    } catch (e) {
-      alert("動画のメタデータ読み込み処理でエラーが発生しました: " + e.message);
-    }
   });
-  // 初期警告表示
-  audioWarning.style.display = 'block';
-  alert("音量増幅機能を使用するには、動画を再生してください");
 </script>
 </body>
-</html>

     input[type="number"] {
       width: 60px;
     }
   </style>
 </head>
 <body>
   <h1>動画プレイヤー</h1>
   <video id="videoPlayer" src="v.mp4" controls></video>
   <div class="controls">
     <div class="control-group">
     <div class="control-group">
       <label for="volumeRange">音量：</label>
+      <input type="range" id="volumeRange" min="0" max="1" step="0.01" value="1">
+      <input type="number" id="volumeInput" min="0" max="1" step="0.01" value="1">
     </div>
     <div class="control-group">
     <button onclick="goFullscreen()">全画面</button>
   </div>
 <script>
   const video = document.getElementById('videoPlayer');
   const speedRange = document.getElementById('speedRange');
   const volumeRange = document.getElementById('volumeRange');
   const volumeInput = document.getElementById('volumeInput');
   const loopCheckbox = document.getElementById('loopCheckbox');
   function updatePlaybackRate(value) {
     const speed = parseFloat(value);
     speedInput.value = speed;
     speedRange.value = speed;
     video.playbackRate = speed;
   function updateVolume(value) {
     const volume = parseFloat(value);
     volumeInput.value = volume;
     volumeRange.value = volume;
+    video.volume = volume;
   }
   ['input', 'change', 'mouseup'].forEach(eventName => {
   });
   function goFullscreen() {
+    if (video.requestFullscreen) {
+      video.requestFullscreen();
+    } else if (video.webkitRequestFullscreen) {
+      video.webkitRequestFullscreen();
+    } else if (video.msRequestFullscreen) {
+      video.msRequestFullscreen();
     }
   }
   video.addEventListener('loadedmetadata', () => {
+    updatePlaybackRate(speedRange.value);
+    updateVolume(volumeRange.value);
+    video.loop = loopCheckbox.checked;
   });
 </script>
 </body>
+</html>