Hugging Face's logo

Spaces:
soiz1
/
Radio-Exercise_No.1
Running

App Files Community
soiz1 commited on
Commit
97b8703
·
verified ·
1 Parent(s): 87447a0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +40 -26
index.html CHANGED
@@ -36,11 +36,16 @@
36
  input[type="number"] {
37
  width: 60px;
38
  }
 
 
 
 
39
  </style>
40
  </head>
41
  <body>
42
  <h1>動画プレイヤー</h1>
43
  <video id="videoPlayer" src="v.mp4" controls></video>
 
44
 
45
  <div class="controls">
46
  <div class="control-group">
@@ -70,23 +75,31 @@
70
  const volumeRange = document.getElementById('volumeRange');
71
  const volumeInput = document.getElementById('volumeInput');
72
  const loopCheckbox = document.getElementById('loopCheckbox');
 
73
 
74
- // Web Audio APIの設定
75
- let audioContext;
76
- let source;
77
- let gainNode;
 
78
 
79
  function setupAudio() {
80
- audioContext = new (window.AudioContext || window.webkitAudioContext)();
81
- source = audioContext.createMediaElementSource(video);
82
- gainNode = audioContext.createGain();
83
-
84
- // 音声ノードを接続
85
- source.connect(gainNode);
86
- gainNode.connect(audioContext.destination);
87
-
88
- // 初期音量設定
89
- updateVolume(volumeRange.value);
 
 
 
 
 
 
90
  }
91
 
92
  function updatePlaybackRate(value) {
@@ -101,8 +114,7 @@
101
  volumeInput.value = volume;
102
  volumeRange.value = volume;
103
 
104
- if (gainNode) {
105
- // 0-300%を0-3の値に変換 (100% = 1.0)
106
  gainNode.gain.value = volume / 100;
107
  } else {
108
  // Web Audio APIが初期化される前は通常の音量制御を使用
@@ -110,6 +122,7 @@
110
  }
111
  }
112
 
 
113
  ['input', 'change', 'mouseup'].forEach(eventName => {
114
  speedRange.addEventListener(eventName, () => {
115
  updatePlaybackRate(speedRange.value);
@@ -141,22 +154,23 @@
141
  }
142
  }
143
 
 
 
 
 
 
 
 
 
 
144
  video.addEventListener('loadedmetadata', () => {
145
  updatePlaybackRate(speedRange.value);
146
  updateVolume(volumeRange.value);
147
  video.loop = loopCheckbox.checked;
148
-
149
- // Web Audio APIをセットアップ
150
- setupAudio();
151
  });
152
 
153
- // iOSなどの一部ブラウザではユーザー操作がないとAudioContextがサスペンドされるので、
154
- // ユーザー操作時に再開するようにする
155
- document.addEventListener('click', () => {
156
- if (audioContext && audioContext.state === 'suspended') {
157
- audioContext.resume();
158
- }
159
- }, { once: true });
160
  </script>
161
  </body>
162
  </html>
 
36
  input[type="number"] {
37
  width: 60px;
38
  }
39
+ #audioWarning {
40
+ color: red;
41
+ display: none;
42
+ }
43
  </style>
44
  </head>
45
  <body>
46
  <h1>動画プレイヤー</h1>
47
  <video id="videoPlayer" src="v.mp4" controls></video>
48
+ <p id="audioWarning">音量増幅機能を使用するには、動画を再生してください</p>
49
 
50
  <div class="controls">
51
  <div class="control-group">
 
75
  const volumeRange = document.getElementById('volumeRange');
76
  const volumeInput = document.getElementById('volumeInput');
77
  const loopCheckbox = document.getElementById('loopCheckbox');
78
+ const audioWarning = document.getElementById('audioWarning');
79
 
80
+ // Web Audio APIの変数
81
+ let audioContext = null;
82
+ let source = null;
83
+ let gainNode = null;
84
+ let audioInitialized = false;
85
 
86
  function setupAudio() {
87
+ try {
88
+ audioContext = new (window.AudioContext || window.webkitAudioContext)();
89
+ source = audioContext.createMediaElementSource(video);
90
+ gainNode = audioContext.createGain();
91
+
92
+ source.connect(gainNode);
93
+ gainNode.connect(audioContext.destination);
94
+
95
+ updateVolume(volumeRange.value);
96
+ audioInitialized = true;
97
+ audioWarning.style.display = 'none';
98
+ } catch (e) {
99
+ console.error("AudioContextの初期化に失敗しました:", e);
100
+ audioWarning.textContent = "音量増幅機能が使用できません: " + e.message;
101
+ audioWarning.style.display = 'block';
102
+ }
103
  }
104
 
105
  function updatePlaybackRate(value) {
 
114
  volumeInput.value = volume;
115
  volumeRange.value = volume;
116
 
117
+ if (audioInitialized && gainNode) {
 
118
  gainNode.gain.value = volume / 100;
119
  } else {
120
  // Web Audio APIが初期化される前は通常の音量制御を使用
 
122
  }
123
  }
124
 
125
+ // イベントリスナーの設定
126
  ['input', 'change', 'mouseup'].forEach(eventName => {
127
  speedRange.addEventListener(eventName, () => {
128
  updatePlaybackRate(speedRange.value);
 
154
  }
155
  }
156
 
157
+ // 動画再生開始時にAudioContextを初期化
158
+ video.addEventListener('play', () => {
159
+ if (!audioInitialized) {
160
+ setupAudio();
161
+ } else if (audioContext && audioContext.state === 'suspended') {
162
+ audioContext.resume();
163
+ }
164
+ });
165
+
166
  video.addEventListener('loadedmetadata', () => {
167
  updatePlaybackRate(speedRange.value);
168
  updateVolume(volumeRange.value);
169
  video.loop = loopCheckbox.checked;
 
 
 
170
  });
171
 
172
+ // ページ読み込み時に警告を表示
173
+ audioWarning.style.display = 'block';
 
 
 
 
 
174
  </script>
175
  </body>
176
  </html>