Update index.html

index.html

@@ -444,7 +444,6 @@
             const audioBuffers = {};
             const audioSources = {};
             const gainNodes = {};
-            const pitchShiftNodes = {};
             
             // 音声ファイル名の配列
             const audioFiles = ['p', 'a', 't', 's', 'k'];
@@ -454,7 +453,6 @@
             let isPlaying = false;
             let isVideoPlaying = false;
             let lastVolume = 1;
-            let shouldPlayFromStartTime = false;
             
             // 動画のメタデータが読み込まれたら
             video.addEventListener('loadedmetadata', function() {
@@ -485,15 +483,25 @@
             }
             
             // 動画の時間更新イベント
-            video.addEventListener('timeupdate', updateTimeDisplay);
+            video.addEventListener('timeupdate', function() {
+                updateTimeDisplay();
+                
+                // ループ再生の場合、終了時間をチェック
+                if (loopCheckbox.checked) {
+                    const endTime = parseFloat(endTimeInput.value) || videoDuration;
+                    if (video.currentTime >= endTime) {
+                        const startTime = parseFloat(startTimeInput.value) || 0;
+                        seekMedia(startTime);
+                    }
+                }
+            });
             
             // 動画終了時の処理
             video.addEventListener('ended', function() {
-                const startTime = parseFloat(startTimeInput.value) || 0;
                 if (!loopCheckbox.checked) {
-                    stopMedia();
-                    video.currentTime = startTime;
-                    updateTimeDisplay();
+                    const startTime = parseFloat(startTimeInput.value) || 0;
+                    seekMedia(startTime);
+                    pauseMedia();
                 }
             });
             
@@ -552,21 +560,23 @@
             
             // 動画クリックで再生/一時停止
             video.addEventListener('click', function() {
-                if (isVideoPlaying) {
-                    pauseMedia();
-                } else {
-                    playMedia();
-                }
+                togglePlayPause();
             });
             
             // 再生/一時停止ボタン
-            playPauseBtn.addEventListener('click', function() {
+            playPauseBtn.addEventListener('click', function(e) {
+                e.stopPropagation(); // 動画クリックとのバブリングを防止
+                togglePlayPause();
+            });
+            
+            // 再生/一時停止をトグル
+            function togglePlayPause() {
                 if (isVideoPlaying) {
                     pauseMedia();
                 } else {
                     playMedia();
                 }
-            });
+            }
             
             // 音量コントロール
             volumeSlider.addEventListener('input', function() {
@@ -617,13 +627,14 @@
                 updatePlaybackRate(speed);
             });
             
-            // 再生速度を更新 (音の高さを維持)
+            // 再生速度を更新 (音の高さは変更しない)
             function updatePlaybackRate(speed) {
                 video.playbackRate = speed;
                 
-                // 音声の再生速度も更新 (音の高さは維持)
+                // 音声の再生速度も更新
                 audioFiles.forEach(file => {
                     if (audioSources[file]) {
+                        // 音声の再生速度を変更しても音の高さは変わらない
                         audioSources[file].playbackRate.value = speed;
                     }
                 });
@@ -675,6 +686,15 @@
             function playAudio(file, startTime) {
                 if (!audioBuffers[file]) return;
                 
+                // 既存のソースがあれば停止
+                if (audioSources[file]) {
+                    try {
+                        audioSources[file].stop();
+                    } catch(e) {
+                        console.log("Audio source already stopped");
+                    }
+                }
+                
                 const source = audioContext.createBufferSource();
                 source.buffer = audioBuffers[file];
                 
@@ -690,26 +710,28 @@
                 gainNodes[file].connect(audioContext.destination);
                 
                 // 再生
-                const currentTime = video.currentTime;
                 const duration = video.duration || videoDuration;
                 const endTime = parseFloat(endTimeInput.value) || duration;
                 const loop = loopCheckbox.checked;
                 
                 // 再生範囲を計算
                 const playStartTime = Math.max(startTime, parseFloat(startTimeInput.value) || 0);
-                const playDuration = Math.min(endTime, duration) - playStartTime;
+                const playEndTime = Math.min(endTime, duration);
+                const playDuration = playEndTime - playStartTime;
                 
-                source.start(0, playStartTime, playDuration);
+                // 再生時間が正の場合のみ再生
+                if (playDuration > 0) {
+                    source.start(0, playStartTime, playDuration);
+                }
                 
                 // ループ設定
-                source.loop = loop;
                 if (loop) {
-                    const start = parseFloat(startTimeInput.value) || 0;
-                    source.loopStart = start;
+                    source.loop = true;
+                    source.loopStart = parseFloat(startTimeInput.value) || 0;
                     source.loopEnd = endTime;
                 }
                 
-                // 再生速度を同期 (音の高さは維持)
+                // 再生速度を同期
                 source.playbackRate.value = video.playbackRate;
                 
                 audioSources[file] = source;
@@ -717,33 +739,29 @@
             
             // 再生関数
             function playMedia() {
-                const startTime = shouldPlayFromStartTime ? (parseFloat(startTimeInput.value) || 0) : video.currentTime;
-                let endTime = parseFloat(endTimeInput.value) || videoDuration;
-                shouldPlayFromStartTime = false;
+                const startTime = video.currentTime;
+                const endTime = parseFloat(endTimeInput.value) || videoDuration;
                 
                 // 終了時間が動画の長さを超えないように
-                endTime = Math.min(endTime, videoDuration);
-                
-                // 動画を設定
-                video.currentTime = startTime;
-                video.muted = true;
+                const actualEndTime = Math.min(endTime, videoDuration);
                 
-                // 音声を再生
-                audioFiles.forEach(file => {
-                    if (audioBuffers[file]) {
-                        // 既存のソースがあれば停止
-                        if (audioSources[file]) {
-                            audioSources[file].stop();
-                        }
-                        playAudio(file, startTime);
-                    }
-                });
+                // 現在位置が終了時間を超えている場合、開始位置に戻る
+                if (startTime >= actualEndTime) {
+                    video.currentTime = parseFloat(startTimeInput.value) || 0;
+                }
                 
                 // 動画を再生
                 video.play();
                 isPlaying = true;
                 isVideoPlaying = true;
                 playPauseBtn.textContent = '⏸';
+                
+                // 音声を再生
+                audioFiles.forEach(file => {
+                    if (audioBuffers[file]) {
+                        playAudio(file, video.currentTime);
+                    }
+                });
             }
             
             // 一時停止関数
@@ -753,7 +771,11 @@
                 video.pause();
                 audioFiles.forEach(file => {
                     if (audioSources[file]) {
-                        audioSources[file].stop();
+                        try {
+                            audioSources[file].stop();
+                        } catch(e) {
+                            console.log("Audio source already stopped");
+                        }
                         audioSources[file] = null;
                     }
                 });
@@ -761,15 +783,6 @@
                 isPlaying = false;
                 isVideoPlaying = false;
                 playPauseBtn.textContent = '▶';
-                shouldPlayFromStartTime = true;
-            }
-            
-            // 停止関数
-            function stopMedia() {
-                pauseMedia();
-                const startTime = parseFloat(startTimeInput.value) || 0;
-                video.currentTime = startTime;
-                updateTimeDisplay();
             }
             
             // ボリュームスライダーのイベント
@@ -801,6 +814,24 @@
                 }
             });
             
+            // ループ設定変更時
+            loopCheckbox.addEventListener('change', function() {
+                if (isPlaying) {
+                    // 再生中の場合は音声を再起動
+                    const currentTime = video.currentTime;
+                    audioFiles.forEach(file => {
+                        if (audioSources[file]) {
+                            try {
+                                audioSources[file].stop();
+                            } catch(e) {
+                                console.log("Audio source already stopped");
+                            }
+                            playAudio(file, currentTime);
+                        }
+                    });
+                }
+            });
+            
             // 初期化
             loadAudioFiles();
             updateVolumeIcon();