Update index.html

index.html

@@ -931,232 +931,6 @@ document.addEventListener('DOMContentLoaded', function() {
         window.alert(`${message}\n\nエラー詳細: ${error.message}`);
     }
 
-async function registerServiceWorker() {
-    const statusElement = document.getElementById('sw-status');
-    const registerBtn = document.getElementById('sw-register-btn');
-    
-    if (!('serviceWorker' in navigator)) {
-        statusElement.textContent = "このブラウザはService Workerをサポートしていません";
-        return;
-    }
-
-    try {
-        // チェックボックスの状態を収集
-        const checkboxStates = {
-            'sw-video': document.getElementById('sw-video').checked,
-            'sw-t-video': document.getElementById('sw-t-video').checked,
-            'sw-piano': document.getElementById('sw-piano').checked,
-            'sw-soprano': document.getElementById('sw-soprano').checked,
-            'sw-alto': document.getElementById('sw-alto').checked,
-            'sw-tenor': document.getElementById('sw-tenor').checked,
-            'sw-combined': document.getElementById('sw-combined').checked,
-            'sw-t-piano': document.getElementById('sw-t-piano').checked,
-            'sw-t-soprano': document.getElementById('sw-t-soprano').checked,
-            'sw-t-alto': document.getElementById('sw-t-alto').checked,
-            'sw-t-tenor': document.getElementById('sw-t-tenor').checked,
-            'sw-t-combined': document.getElementById('sw-t-combined').checked,
-            'sw-index': document.getElementById('sw-index').checked,
-            'sw-root': document.getElementById('sw-root').checked
-        };
-
-        // チェックされたファイルを収集
-        const filesToCache = [];
-        
-        // 通常のメディアファイル
-        if (checkboxStates['sw-video']) filesToCache.push('/v.mp4');
-        if (checkboxStates['sw-piano']) filesToCache.push('/p.mp3');
-        if (checkboxStates['sw-soprano']) filesToCache.push('/s.mp3');
-        if (checkboxStates['sw-alto']) filesToCache.push('/a.mp3');
-        if (checkboxStates['sw-tenor']) filesToCache.push('/t.mp3');
-        if (checkboxStates['sw-combined']) filesToCache.push('/k.mp3');
-        
-        // t/ ディレクトリのメディアファイル
-        if (checkboxStates['sw-t-video']) filesToCache.push('/t/v.mp4');
-        if (checkboxStates['sw-t-piano']) filesToCache.push('/t/p.mp3');
-        if (checkboxStates['sw-t-soprano']) filesToCache.push('/t/s.mp3');
-        if (checkboxStates['sw-t-alto']) filesToCache.push('/t/a.mp3');
-        if (checkboxStates['sw-t-tenor']) filesToCache.push('/t/t.mp3');
-        if (checkboxStates['sw-t-combined']) filesToCache.push('/t/k.mp3');
-
-        registerBtn.disabled = true;
-        statusElement.textContent = "サービスワーカーを登録中...";
-        
-        // Service Workerを登録
-        const registration = await navigator.serviceWorker.register('/service-worker.js');
-        
-        // Service Workerがアクティブになるのを待つ
-        await new Promise((resolve, reject) => {
-            if (registration.active) {
-                resolve();
-            } else {
-                const worker = registration.installing || registration.waiting;
-                if (worker) {
-                    worker.addEventListener('statechange', () => {
-                        if (worker.state === 'activated') {
-                            resolve();
-                        } else if (worker.state === 'rejected') {
-                            reject(new Error('Service Workerの登録が拒否されました'));
-                        }
-                    });
-                } else {
-                    registration.addEventListener('updatefound', () => {
-                        const newWorker = registration.installing;
-                        newWorker.addEventListener('statechange', () => {
-                            if (newWorker.state === 'activated') {
-                                resolve();
-                            } else if (newWorker.state === 'rejected') {
-                                reject(new Error('Service Workerの登録が拒否されました'));
-                            }
-                        });
-                    });
-                }
-            }
-        });
-
-        // キャッシュするファイルをService Workerに送信
-        registration.active.postMessage({
-            type: 'CACHE_FILES',
-            files: filesToCache,
-            checkboxStates: checkboxStates
-        });
-
-        // キャッシュが完了するのを待つ
-        statusElement.textContent = "ファイルをキャッシュ中...";
-        
-        // キャッシュが完了したか確認する
-        await verifyCache(filesToCache);
-        
-        statusElement.textContent = "サービスワーカーが正常に登録され、ファイルがキャッシュされました";
-        registerBtn.disabled = false;
-    } catch (error) {
-        console.error('Service Worker登録エラー:', error);
-        statusElement.textContent = `サービスワーカー登録に失敗しました: ${error.message}`;
-        registerBtn.disabled = false;
-    }
-}
-async function verifyCache(filesToCache) {
-    const maxAttempts = 10;
-    const delay = 500; // 500msごとに確認
-
-    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-        const cache = await caches.open('media-player-cache-v1');
-        const cachedRequests = await cache.keys();
-        const cachedUrls = cachedRequests.map(request => request.url.replace(location.origin, ''));
-
-        // ログはここに移動すると、キャッシュ状況が見えやすい
-        console.log('filesToCache:', filesToCache);
-        console.log('cachedUrls:', cachedUrls);
-
-        // すべてのファイルがキャッシュされているか確認
-        const allCached = filesToCache.every(file => cachedUrls.includes(file));
-        
-        if (allCached) {
-            return true;
-        }
-        
-        // 最後の試行でなければ待機
-        if (attempt < maxAttempts) {
-            await new Promise(resolve => setTimeout(resolve, delay));
-        }
-    }
-
-    throw new Error('キャッシュが完了しませんでした');
-}
-
-async function restoreCheckboxStates() {
-    try {
-        const cache = await caches.open('settings-cache');
-        const response = await cache.match('checkbox-states');
-        
-        if (response) {
-            const checkboxStates = await response.json();
-            
-            for (const [id, checked] of Object.entries(checkboxStates)) {
-                const checkbox = document.getElementById(id);
-                if (checkbox) {
-                    checkbox.checked = checked;
-                }
-            }
-        }
-    } catch (error) {
-        console.error('チェックボックス状態の復元に失敗:', error);
-    }
-}
-
-// オフライン状態をチェック
-function checkOnlineStatus() {
-    const settingsSection = document.querySelector('.settings');
-    if (!navigator.onLine) {
-        settingsSection.style.display = 'none';
-    } else {
-        settingsSection.style.display = 'block';
-    }
-}
-
-// 全画面時のUI表示制御
-function setupFullscreenUI() {
-    const videoContainer = document.getElementById('video-container');
-    const controls = document.querySelector('.video-controls');
-    let hideTimeout;
-    let isMouseOverControls = false;
-
-    // マウスがコントロール上にあるかどうかを追跡
-    controls.addEventListener('mouseenter', () => {
-        isMouseOverControls = true;
-        clearTimeout(hideTimeout);
-        controls.style.opacity = '1';
-    });
-
-    controls.addEventListener('mouseleave', () => {
-        isMouseOverControls = false;
-        startHideTimeout();
-    });
-
-    function startHideTimeout() {
-        clearTimeout(hideTimeout);
-        if (isFullscreen && !isMouseOverControls) {
-            hideTimeout = setTimeout(() => {
-                controls.style.opacity = '0';
-            }, 1500);
-        }
-    }
-
-    // 動画コンテナでマウス移動を検出
-    videoContainer.addEventListener('mousemove', () => {
-        if (isFullscreen) {
-            controls.style.opacity = '1';
-            startHideTimeout();
-        }
-    });
-}
-// DOMContentLoaded時の初期化
-document.addEventListener('DOMContentLoaded', function() {
-    // チェックボックスをデフォルトでオフに
-    document.querySelectorAll('.settings input[type="checkbox"]').forEach(checkbox => {
-        checkbox.checked = false;
-    });
-    
-    // index.htmlのチェックボックスは必須なのでオンに
-    document.getElementById('sw-index').checked = true;
-    document.getElementById('sw-index').disabled = true;
-    
-    // ルートのチェックボックスは非表示に
-    document.getElementById('sw-root').parentElement.style.display = 'none';
-    
-    // チェックボックスの状態を復元
-    restoreCheckboxStates();
-    
-    // オンライン状態をチェック
-    checkOnlineStatus();
-    window.addEventListener('online', checkOnlineStatus);
-    window.addEventListener('offline', checkOnlineStatus);
-    
-    // 全画面UI制御を設定
-    setupFullscreenUI();
-});
-
-// 登録ボタンにイベントリスナーを追加
-document.getElementById('sw-register-btn').addEventListener('click', registerServiceWorker);
     // 要素を取得
     const video = document.getElementById('video');
     const videoContainer = document.getElementById('video-container');
@@ -1194,8 +968,7 @@ document.getElementById('sw-register-btn').addEventListener('click', registerSer
     const audioElements = {};
     const audioBuffers = {};
     const audioFiles = ['p', 'a', 't', 's', 'k'];
-    let combinedAudioBuffer = null;
-    let combinedAudioSource = null;
+    let combinedAudioElement = null;
     let isAudioCombined = false;
     let currentVolumes = { p: 0, a: 1, t: 1, s: 1, k: 0 };
     
@@ -1210,16 +983,15 @@ document.getElementById('sw-register-btn').addEventListener('click', registerSer
     video.addEventListener('waiting', function() {
         isBuffering = true;
         bufferingIndicator.style.display = 'block';
-        if (combinedAudioSource) {
-            combinedAudioSource.stop();
-            combinedAudioSource = null;
+        if (combinedAudioElement) {
+            combinedAudioElement.pause();
         }
     });
     
     video.addEventListener('playing', function() {
         isBuffering = false;
         bufferingIndicator.style.display = 'none';
-        if (!combinedAudioSource && isPlaying) {
+        if (combinedAudioElement && isPlaying) {
             syncAudioWithVideo();
         }
     });
@@ -1249,7 +1021,7 @@ document.getElementById('sw-register-btn').addEventListener('click', registerSer
         if (!isAudioCombined || !isPlaying || isBuffering) return;
         
         const videoTime = video.currentTime;
-        const audioTime = audioContext.currentTime - (combinedAudioSource?.startTime || 0);
+        const audioTime = combinedAudioElement.currentTime;
         const drift = videoTime - audioTime;
         
         // ズレを記録（直近5回分）
@@ -1275,76 +1047,18 @@ document.getElementById('sw-register-btn').addEventListener('click', registerSer
         
         const currentTime = video.currentTime;
         
-        if (combinedAudioSource) {
-            combinedAudioSource.stop();
+        if (combinedAudioElement) {
+            combinedAudioElement.currentTime = currentTime;
+            if (isPlaying) {
+                combinedAudioElement.play().catch(e => console.error('音声再生エラー:', e));
+            }
         }
         
-// 新しい audio 要素を作成
-const combinedAudioElement = document.createElement('audio');
-combinedAudioElement.src = URL.createObjectURL(bufferToWave(combinedAudioBuffer));
-combinedAudioElement.preservesPitch = true; // ピッチを維持
-combinedAudioElement.playbackRate = currentPlaybackRate;
-combinedAudioElement.currentTime = currentTime;
-combinedAudioElement.play();
-
-        
         // ズレ記録をリセット
         syncDriftLog = [];
         lastSyncTime = performance.now();
     }
 
-  function bufferToWave(abuffer) {
-    const numOfChan = abuffer.numberOfChannels,
-        length = abuffer.length * numOfChan * 2 + 44,
-        buffer = new ArrayBuffer(length),
-        view = new DataView(buffer),
-        channels = [],
-        sampleRate = abuffer.sampleRate,
-        offset = 0,
-        pos = 0;
-
-    // write WAV header
-    setUint32(0x46464952); // "RIFF"
-    setUint32(length - 8); // file length - 8
-    setUint32(0x45564157); // "WAVE"
-
-    setUint32(0x20746d66); // "fmt " chunk
-    setUint32(16); // length = 16
-    setUint16(1); // PCM (uncompressed)
-    setUint16(numOfChan);
-    setUint32(sampleRate);
-    setUint32(sampleRate * 2 * numOfChan);
-    setUint16(numOfChan * 2);
-    setUint16(16);
-
-    setUint32(0x61746164); // "data" - chunk
-    setUint32(length - pos - 4);
-
-    // write interleaved data
-    for (let i = 0; i < abuffer.length; i++) {
-        for (let channel = 0; channel < numOfChan; channel++) {
-            let sample = abuffer.getChannelData(channel)[i] * 0x7fff;
-            if (sample < -32768) sample = -32768;
-            if (sample > 32767) sample = 32767;
-            view.setInt16(pos, sample, true);
-            pos += 2;
-        }
-    }
-
-    function setUint16(data) {
-        view.setUint16(pos, data, true);
-        pos += 2;
-    }
-
-    function setUint32(data) {
-        view.setUint32(pos, data, true);
-        pos += 4;
-    }
-
-    return new Blob([buffer], { type: 'audio/wav' });
-}
-
-
     // 音声ファイルをロード
     function loadAudioFiles() {
         audioFiles.forEach(file => {
@@ -1372,11 +1086,6 @@ combinedAudioElement.play();
 
     // 音声を結合する関数
     async function combineAudio() {
-        if (!audioContext) {
-            combineStatus.textContent = "Web Audio APIが利用できません";
-            return;
-        }
-
         combineButton.disabled = true;
         combineStatus.textContent = "音声を合成中...";
 
@@ -1406,7 +1115,7 @@ combinedAudioElement.play();
             const maxDuration = Math.max(...buffers.filter(b => b).map(b => b.duration));
 
             // 新しい音声バッファを作成
-            combinedAudioBuffer = audioContext.createBuffer(
+            const combinedAudioBuffer = audioContext.createBuffer(
                 2, // ステレオ
                 audioContext.sampleRate * maxDuration,
                 audioContext.sampleRate
@@ -1451,6 +1160,15 @@ combinedAudioElement.play();
                 }
             }
 
+            // AudioBufferをBlobに変換
+            const blob = bufferToWave(combinedAudioBuffer);
+            const url = URL.createObjectURL(blob);
+
+            // 新しいaudio要素を作成
+            combinedAudioElement = new Audio(url);
+            combinedAudioElement.preservesPitch = true;
+            combinedAudioElement.playbackRate = currentPlaybackRate;
+
             isAudioCombined = true;
             combineStatus.textContent = "音声の合成が完了しました";
             enablePlayerControls();
@@ -1467,6 +1185,57 @@ combinedAudioElement.play();
         }
     }
 
+    function bufferToWave(abuffer) {
+        const numOfChan = abuffer.numberOfChannels,
+            length = abuffer.length * numOfChan * 2 + 44,
+            buffer = new ArrayBuffer(length),
+            view = new DataView(buffer),
+            channels = [],
+            sampleRate = abuffer.sampleRate,
+            offset = 0,
+            pos = 0;
+
+        // write WAV header
+        setUint32(0x46464952); // "RIFF"
+        setUint32(length - 8); // file length - 8
+        setUint32(0x45564157); // "WAVE"
+
+        setUint32(0x20746d66); // "fmt " chunk
+        setUint32(16); // length = 16
+        setUint16(1); // PCM (uncompressed)
+        setUint16(numOfChan);
+        setUint32(sampleRate);
+        setUint32(sampleRate * 2 * numOfChan);
+        setUint16(numOfChan * 2);
+        setUint16(16);
+
+        setUint32(0x61746164); // "data" - chunk
+        setUint32(length - pos - 4);
+
+        // write interleaved data
+        for (let i = 0; i < abuffer.length; i++) {
+            for (let channel = 0; channel < numOfChan; channel++) {
+                let sample = abuffer.getChannelData(channel)[i] * 0x7fff;
+                if (sample < -32768) sample = -32768;
+                if (sample > 32767) sample = 32767;
+                view.setInt16(pos, sample, true);
+                pos += 2;
+            }
+        }
+
+        function setUint16(data) {
+            view.setUint16(pos, data, true);
+            pos += 2;
+        }
+
+        function setUint32(data) {
+            view.setUint32(pos, data, true);
+            pos += 4;
+        }
+
+        return new Blob([buffer], { type: 'audio/wav' });
+    }
+
     function applyVolume() {
         if (!isAudioCombined) return;
         
@@ -1478,65 +1247,32 @@ combinedAudioElement.play();
         // 最終音量 (0-1)
         const finalVolume = Math.max(0, Math.min(1, baseVolume * globalVolume));
         
-        // 動画の音量を設定
+        // 動画と音声の音量を設定
         video.volume = finalVolume;
+        if (combinedAudioElement) {
+            combinedAudioElement.volume = finalVolume;
+        }
         
         // 音量アイコンを更新
         updateVolumeIcon();
     }
 
-function applyPlaybackRate() {
-    if (!isAudioCombined) return;
-    
-    const speed = parseFloat(playbackSpeedSlider.value);
-    currentPlaybackRate = speed;
-    video.playbackRate = speed;
-    
-    if (combinedAudioSource) {
-        // 既存のオーディオソースを停止
-        combinedAudioSource.stop();
+    function applyPlaybackRate() {
+        if (!isAudioCombined) return;
         
-        // 新しいオーディオソースを作成
-        combinedAudioSource = audioContext.createBufferSource();
-        combinedAudioSource.buffer = combinedAudioBuffer;
-        combinedAudioSource.connect(audioContext.destination);
+        const speed = parseFloat(playbackSpeedSlider.value);
+        currentPlaybackRate = speed;
+        video.playbackRate = speed;
         
-        // ピッチ維持設定を一度だけ行う
-        if ('preservesPitch' in combinedAudioSource) {
-            combinedAudioSource.preservesPitch = true;
-        } else if ('webkitPreservesPitch' in combinedAudioSource) {
-            combinedAudioSource.webkitPreservesPitch = true;
-        } else if ('mozPreservesPitch' in combinedAudioSource) {
-            combinedAudioSource.mozPreservesPitch = true;
+        if (combinedAudioElement) {
+            combinedAudioElement.playbackRate = speed;
         }
         
-        // 再生速度を設定
-        combinedAudioSource.playbackRate.value = speed;
-        
-        // 再生中なら新しいソースで再生を続ける
-        if (isPlaying) {
-            combinedAudioSource.start(0, video.currentTime);
-        }
-    }
-    
-    speedValue.textContent = speed.toFixed(2) + 'x';
-    playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
-    speedSlider.value = speed;
-}
-document.addEventListener('visibilitychange', function() {
-    if (document.hidden) {
-        // タブが非アクティブになったら同期チェックを停止
-        stopSyncCheck();
-        if (isPlaying) {
-            pauseMedia();
-        }
-    } else {
-        // タブがアクティブになったら同期チェックを再開
-        if (isPlaying) {
-            startSyncCheck();
-        }
+        speedValue.textContent = speed.toFixed(2) + 'x';
+        playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
+        speedSlider.value = speed;
     }
-});
+
     // プレイヤーコントロールを有効化
     function enablePlayerControls() {
         disabledOverlay.style.display = 'none';
@@ -1556,50 +1292,38 @@ document.addEventListener('visibilitychange', function() {
 
     // ��レビュー再生
     function togglePreview() {
-        if (!isAudioCombined || !combinedAudioBuffer) return;
+        if (!isAudioCombined || !combinedAudioElement) return;
 
         if (previewButton.textContent === '▶') {
             // 再生
-            if (combinedAudioSource) {
-                combinedAudioSource.stop();
-            }
-
-            combinedAudioSource = audioContext.createBufferSource();
-            combinedAudioSource.buffer = combinedAudioBuffer;
-            combinedAudioSource.connect(audioContext.destination);
-            combinedAudioSource.start(0);
-
-            previewButton.textContent = '⏸';
-            
-            // プレビューの時間表示を更新
-            const updatePreviewTime = () => {
-                if (!combinedAudioSource || !isAudioCombined) return;
-                
-                const currentTime = audioContext.currentTime - combinedAudioSource.startTime;
-                const duration = combinedAudioBuffer.duration;
-                
-                if (currentTime >= duration) {
-                    previewButton.textContent = '▶';
-                    previewTime.textContent = `00:00 / ${formatTime(duration)}`;
-                    return;
-                }
-                
-                previewTime.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
-                requestAnimationFrame(updatePreviewTime);
-            };
-            
-            updatePreviewTime();
-            
-            combinedAudioSource.onended = () => {
-                previewButton.textContent = '▶';
-                previewTime.textContent = `00:00 / ${formatTime(combinedAudioBuffer.duration)}`;
-            };
+            combinedAudioElement.currentTime = 0;
+            combinedAudioElement.play()
+                .then(() => {
+                    previewButton.textContent = '⏸';
+                    
+                    // プレビューの時間表示を更新
+                    const updatePreviewTime = () => {
+                        if (!combinedAudioElement || !isAudioCombined) return;
+                        
+                        const currentTime = combinedAudioElement.currentTime;
+                        const duration = combinedAudioElement.duration;
+                        
+                        if (currentTime >= duration) {
+                            previewButton.textContent = '▶';
+                            previewTime.textContent = `00:00 / ${formatTime(duration)}`;
+                            return;
+                        }
+                        
+                        previewTime.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
+                        requestAnimationFrame(updatePreviewTime);
+                    };
+                    
+                    updatePreviewTime();
+                })
+                .catch(e => console.error('プレビュー再生エラー:', e));
         } else {
             // 一時停止
-            if (combinedAudioSource) {
-                combinedAudioSource.stop();
-                combinedAudioSource = null;
-            }
+            combinedAudioElement.pause();
             previewButton.textContent = '▶';
         }
     }
@@ -1716,9 +1440,8 @@ document.addEventListener('visibilitychange', function() {
             playPauseBtn.textContent = '▶';
             stopSyncCheck();
             
-            if (combinedAudioSource) {
-                combinedAudioSource.stop();
-                combinedAudioSource = null;
+            if (combinedAudioElement) {
+                combinedAudioElement.pause();
             }
         } catch (error) {
             console.error('メディア一時停止エラー:', error);
@@ -1765,15 +1488,10 @@ document.addEventListener('visibilitychange', function() {
             const seekTime = Math.max(startTime, Math.min(time, endTime));
             video.currentTime = seekTime;
             
-            if (combinedAudioSource) {
-                combinedAudioSource.stop();
-                combinedAudioSource = audioContext.createBufferSource();
-                combinedAudioSource.buffer = combinedAudioBuffer;
-                combinedAudioSource.connect(audioContext.destination);
-                
+            if (combinedAudioElement) {
+                combinedAudioElement.currentTime = seekTime;
                 if (isPlaying) {
-                    combinedAudioSource.start(0, seekTime);
-                    combinedAudioSource.playbackRate.value = currentPlaybackRate;
+                    combinedAudioElement.play().catch(e => console.error('音声再生エラー:', e));
                 }
             }
         } catch (error) {
@@ -1866,8 +1584,8 @@ document.addEventListener('visibilitychange', function() {
         currentPlaybackRate = speed;
         video.playbackRate = speed;
         
-        if (combinedAudioSource) {
-            combinedAudioSource.playbackRate.value = speed;
+        if (combinedAudioElement) {
+            combinedAudioElement.playbackRate = speed;
         }
     }