Spaces:

soiz1
/

Radio-Exercise_No.1

Running

App Files Files Community

soiz1 commited on 18 days ago

Commit

ce84b9c

verified ·

1 Parent(s): 28e42ca

Update index.html

Browse files

Files changed (1) hide show

index.html +59 -101

index.html CHANGED Viewed

@@ -1,73 +1,3 @@
-<!DOCTYPE html>
-<html lang="ja">
-<head>
-  <meta charset="UTF-8">
-  <title>動画プレイヤー</title>
-  <style>
-    body {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      background-color: #f0f0f0;
-      font-family: sans-serif;
-      padding: 20px;
-    }
-    video {
-      max-width: 100%;
-      height: auto;
-      margin-bottom: 10px;
-    }
-    .controls {
-      display: flex;
-      flex-direction: column;
-      gap: 15px;
-      width: 100%;
-      max-width: 500px;
-    }
-    .control-group {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 10px;
-    }
-    input[type="range"] {
-      flex: 1;
-    }
-    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">
-      <label for="speedRange">再生速度：</label>
-      <input type="range" id="speedRange" min="0.0001" max="5" step="0.0001" value="1">
-      <input type="number" id="speedInput" min="0.0001" step="0.0001" value="1">
-    </div>
-    <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">
-      <label for="loopCheckbox">ループ再生：</label>
-      <input type="checkbox" id="loopCheckbox" checked>
-    </div>
-    <button onclick="goFullscreen()">全画面</button>
-  </div>
 <script>
   const video = document.getElementById('videoPlayer');
   const speedRange = document.getElementById('speedRange');
@@ -77,7 +7,6 @@
   const loopCheckbox = document.getElementById('loopCheckbox');
   const audioWarning = document.getElementById('audioWarning');
-  // Web Audio APIの変数
   let audioContext = null;
   let source = null;
   let gainNode = null;
@@ -88,22 +17,28 @@
       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) {
-      console.error("AudioContextの初期化に失敗しました:", e);
-      audioWarning.textContent = "音量増幅機能が使用できません: " + e.message;
       audioWarning.style.display = 'block';
     }
   }
   function updatePlaybackRate(value) {
     const speed = parseFloat(value);
     speedInput.value = speed;
     speedRange.value = speed;
     video.playbackRate = speed;
@@ -111,18 +46,31 @@
   function updateVolume(value) {
     const volume = parseFloat(value);
     volumeInput.value = volume;
     volumeRange.value = volume;
     if (audioInitialized && gainNode) {
-      gainNode.gain.value = volume / 100;
     } else {
-      // Web Audio APIが初期化される前は通常の音量制御を使用
-      video.volume = Math.min(volume / 100, 1);
     }
   }
-  // イベントリスナーの設定
   ['input', 'change', 'mouseup'].forEach(eventName => {
     speedRange.addEventListener(eventName, () => {
       updatePlaybackRate(speedRange.value);
@@ -145,33 +93,43 @@
   });
   function goFullscreen() {
-    if (video.requestFullscreen) {
-      video.requestFullscreen();
-    } else if (video.webkitRequestFullscreen) {
-      video.webkitRequestFullscreen();
-    } else if (video.msRequestFullscreen) {
-      video.msRequestFullscreen();
     }
   }
-video.addEventListener('play', () => {
-  // AudioContextがまだ初期化されていなければ初期化
-  if (!audioInitialized) {
-    setupAudio();
-  } else if (audioContext && audioContext.state === 'suspended') {
-    audioContext.resume();
-  }
-});
   video.addEventListener('loadedmetadata', () => {
-    updatePlaybackRate(speedRange.value);
-    updateVolume(volumeRange.value);
-    video.loop = loopCheckbox.checked;
   });
-  // ページ読み込み時に警告を表示
   audioWarning.style.display = 'block';
 </script>
-</body>
-</html>

 <script>
   const video = document.getElementById('videoPlayer');
   const speedRange = document.getElementById('speedRange');
   const loopCheckbox = document.getElementById('loopCheckbox');
   const audioWarning = document.getElementById('audioWarning');
   let audioContext = null;
   let source = null;
   let gainNode = null;
       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;
   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 => {
     speedRange.addEventListener(eventName, () => {
       updatePlaybackRate(speedRange.value);
   });
   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>