Update index.html

index.html

@@ -735,704 +735,771 @@
     </div>
     
 <script>
-    document.addEventListener('DOMContentLoaded', function() {
-        // テクノロジー風背景を生成
-        function createTechBackground() {
-            const bg = document.getElementById('techBg');
+document.addEventListener('DOMContentLoaded', function() {
+    // テクノロジー風背景を生成
+    function createTechBackground() {
+        const bg = document.getElementById('techBg');
+        
+        for (let i = 0; i < 200; i++) {
+            const line = document.createElement('div');
+            line.className = 'circuit-line';
             
-            // 回路風の線を生成
-            for (let i = 0; i < 200; i++) {
-                const line = document.createElement('div');
-                line.className = 'circuit-line';
-                
-                const isHorizontal = Math.random() > 0.5;
-                if (isHorizontal) {
-                    line.style.width = `${Math.random() * 300 + 100}px`;
-                    line.style.height = '1px';
-                } else {
-                    line.style.width = '1px';
-                    line.style.height = `${Math.random() * 300 + 100}px`;
-                }
-                
-                line.style.left = `${Math.random() * 100}%`;
-                line.style.top = `${Math.random() * 100}%`;
-                line.style.opacity = Math.random() * 0.5 + 0.1;
-                
-                bg.appendChild(line);
-            }
-            
-            // グリッドドットを生成
-            for (let i = 0; i < 200; i++) {
-                const dot = document.createElement('div');
-                dot.className = 'grid-dot';
-                dot.style.left = `${Math.random() * 100}%`;
-                dot.style.top = `${Math.random() * 100}%`;
-                bg.appendChild(dot);
-            }
-            
-            // 六角形を生成
-            for (let i = 0; i < 15; i++) {
-                const hex = document.createElement('div');
-                hex.className = 'hexagon';
-                hex.style.left = `${Math.random() * 100}%`;
-                hex.style.top = `${Math.random() * 100}%`;
-                hex.style.transform = `rotate(${Math.random() * 360}deg)`;
-                hex.style.animation = `float ${Math.random() * 10 + 5}s infinite ease-in-out`;
-                bg.appendChild(hex);
+            const isHorizontal = Math.random() > 0.5;
+            if (isHorizontal) {
+                line.style.width = `${Math.random() * 300 + 100}px`;
+                line.style.height = '1px';
+            } else {
+                line.style.width = '1px';
+                line.style.height = `${Math.random() * 300 + 100}px`;
             }
             
-            // パルスする点を生成
-            for (let i = 0; i < 8; i++) {
-                const pulse = document.createElement('div');
-                pulse.className = 'pulse';
-                pulse.style.left = `${Math.random() * 100}%`;
-                pulse.style.top = `${Math.random() * 100}%`;
-                pulse.style.animationDelay = `${Math.random() * 2}s`;
-                bg.appendChild(pulse);
-            }
+            line.style.left = `${Math.random() * 100}%`;
+            line.style.top = `${Math.random() * 100}%`;
+            line.style.opacity = Math.random() * 0.5 + 0.1;
+            bg.appendChild(line);
         }
-        
-        createTechBackground();
-        
-        // ローディング状態を管理
-        let loadingCount = 0;
-        let totalToLoad = 6; // 動画 + 5音声ファイル
-        let lastUpdateTime = 0;
-        const updateInterval = 1; // 50msごとに更新 (20fps)
-        
-        // ローディング完了チェック
-        function checkLoadingComplete() {
-            loadingCount++;
-            if (loadingCount >= totalToLoad) {
-                setTimeout(function() {
-                    const loadingOverlay = document.getElementById('loadingOverlay');
-                    loadingOverlay.style.opacity = '0';
-                    setTimeout(function() {
-                        loadingOverlay.style.display = 'none';
-                    }, 1000);
-                }, 500);
-            }
+
+        for (let i = 0; i < 200; i++) {
+            const dot = document.createElement('div');
+            dot.className = 'grid-dot';
+            dot.style.left = `${Math.random() * 100}%`;
+            dot.style.top = `${Math.random() * 100}%`;
+            bg.appendChild(dot);
         }
-        
-        // エラーハンドリング関数
-        function handleError(error, message) {
-            console.error(message, error);
-            window.alert(`${message}\n\nエラー詳細: ${error.message}`);
+
+        for (let i = 0; i < 15; i++) {
+            const hex = document.createElement('div');
+            hex.className = 'hexagon';
+            hex.style.left = `${Math.random() * 100}%`;
+            hex.style.top = `${Math.random() * 100}%`;
+            hex.style.transform = `rotate(${Math.random() * 360}deg)`;
+            hex.style.animation = `float ${Math.random() * 10 + 5}s infinite ease-in-out`;
+            bg.appendChild(hex);
         }
-        
-        // ピッチ設定関数 (改良版)
-        function setPreservesPitch(el, value) {
+
+        for (let i = 0; i < 8; i++) {
+            const pulse = document.createElement('div');
+            pulse.className = 'pulse';
+            pulse.style.left = `${Math.random() * 100}%`;
+            pulse.style.top = `${Math.random() * 100}%`;
+            pulse.style.animationDelay = `${Math.random() * 2}s`;
+            bg.appendChild(pulse);
+        }
+    }
+    
+    createTechBackground();
+    
+    // ローディング状態を管理
+    let loadingCount = 0;
+    let totalToLoad = 6; // 動画 + 5つの音声ファイル
+    let lastUpdateTime = 0;
+    const updateInterval = 1;
+    
+    function checkLoadingComplete() {
+        loadingCount++;
+        if (loadingCount >= totalToLoad) {
+            setTimeout(function() {
+                const loadingOverlay = document.getElementById('loadingOverlay');
+                loadingOverlay.style.opacity = '0';
+                setTimeout(function() {
+                    loadingOverlay.style.display = 'none';
+                }, 1000);
+            }, 500);
+        }
+    }
+    
+    function handleError(error, message) {
+        console.error(message, error);
+        window.alert(`${message}\n\nエラー詳細: ${error.message}`);
+    }
+    
+    // Web Audio Context の初期化
+    let audioContext;
+    try {
+        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    } catch (e) {
+        console.error('Web Audio APIがサポートされていません:', e);
+    }
+
+    // 要素を取得
+    const video = document.getElementById('video');
+    const videoContainer = document.getElementById('video-container');
+    const playPauseBtn = document.getElementById('play-pause-btn');
+    const timeDisplay = document.getElementById('time-display');
+    const progressContainer = document.getElementById('progress-container');
+    const progressBar = document.getElementById('progress-bar');
+    const progressTime = document.getElementById('progress-time');
+    const volumeBtn = document.getElementById('volume-btn');
+    const volumeSlider = document.getElementById('volume-slider');
+    const speedSlider = document.getElementById('speed-slider');
+    const speedValue = document.getElementById('speed-value');
+    const playbackSpeedSlider = document.getElementById('playback-speed');
+    const playbackSpeedValue = document.getElementById('playback-speed-value');
+    const fullscreenBtn = document.getElementById('fullscreen-btn');
+    const startTimeInput = document.getElementById('start-time');
+    const endTimeInput = document.getElementById('end-time');
+    const loopCheckbox = document.getElementById('loop');
+    const globalVolumeSlider = document.getElementById('global-volume');
+    const globalVolumeValue = document.getElementById('global-volume-value');
+    const audioSliders = document.querySelectorAll('.audio-slider');
+    const volumeValues = document.querySelectorAll('.volume-value');
+    const setStartTimeBtn = document.getElementById('set-start-time');
+    const setEndTimeBtn = document.getElementById('set-end-time');
+    const disabledOverlay = document.getElementById('disabledOverlay');
+    const combineButton = document.getElementById('combine-button');
+    const combineStatus = document.getElementById('combine-status');
+    const previewSection = document.getElementById('preview-section');
+    const previewButton = document.getElementById('preview-button');
+    const previewTime = document.getElementById('preview-time');
+    
+    // 音声オブジェクトを作成
+    const audioElements = {};
+    const audioBuffers = {};
+    const audioFiles = ['p', 'a', 't', 's', 'k'];
+    let combinedAudioBuffer = null;
+    let combinedAudioSource = null;
+    let isAudioCombined = false;
+    let currentVolumes = { p: 0, a: 1, t: 1, s: 1, k: 0 };
+    
+    // 初期化
+    let videoDuration = 0;
+    let isPlaying = false;
+    let lastVolume = 1;
+    let currentPlaybackRate = 1;
+    let isFullscreen = false;
+    let lastSyncTime = 0;
+    let syncDriftLog = [];
+    
+    // 音声ファイルをロード (改良版)
+    function loadAudioFiles() {
+        audioFiles.forEach(file => {
             try {
-                if (el.preservesPitch !== undefined) {
-                    el.preservesPitch = value;
-                } else if (el.webkitPreservesPitch !== undefined) {
-                    el.webkitPreservesPitch = value;
-                } else if (el.mozPreservesPitch !== undefined) {
-                    el.mozPreservesPitch = value;
-                }
+                const audio = new Audio(`${file}.mp3`);
+                audio.preload = 'auto';
+                audio.loop = false;
+                audioElements[file] = audio;
                 
-                // ピッチ保持を確実にするための追加設定
-                if (el.playbackRate !== undefined) {
-                    const rate = el.playbackRate;
-                    // 一度1.0に戻してから再設定
-                    el.playbackRate = 1.0;
-                    el.playbackRate = rate;
-                }
+                audio.addEventListener('loadedmetadata', function() {
+                    console.log(`${file}.mp3 loaded`);
+                    checkLoadingComplete();
+                });
+                
+                audio.addEventListener('error', function() {
+                    console.error(`音声ファイル読み込みエラー (${file}.mp3):`, audio.error);
+                    checkLoadingComplete();
+                });
             } catch (error) {
-                handleError(error, 'ピッチ設定中にエラーが発生しました');
-            }
-        }
-        
-        // 要素を取得
-        const video = document.getElementById('video');
-        const videoContainer = document.getElementById('video-container');
-        const playPauseBtn = document.getElementById('play-pause-btn');
-        const timeDisplay = document.getElementById('time-display');
-        const progressContainer = document.getElementById('progress-container');
-        const progressBar = document.getElementById('progress-bar');
-        const progressTime = document.getElementById('progress-time');
-        const volumeBtn = document.getElementById('volume-btn');
-        const volumeSlider = document.getElementById('volume-slider');
-        const speedSlider = document.getElementById('speed-slider');
-        const speedValue = document.getElementById('speed-value');
-        const playbackSpeedSlider = document.getElementById('playback-speed');
-        const playbackSpeedValue = document.getElementById('playback-speed-value');
-        const fullscreenBtn = document.getElementById('fullscreen-btn');
-        const startTimeInput = document.getElementById('start-time');
-        const endTimeInput = document.getElementById('end-time');
-        const loopCheckbox = document.getElementById('loop');
-        const globalVolumeSlider = document.getElementById('global-volume');
-        const globalVolumeValue = document.getElementById('global-volume-value');
-        const audioSliders = document.querySelectorAll('.audio-slider');
-        const volumeValues = document.querySelectorAll('.volume-value');
-        const setStartTimeBtn = document.getElementById('set-start-time');
-        const setEndTimeBtn = document.getElementById('set-end-time');
-        
-        // 音声オブジェクトを作成
-        const audioElements = {};
-        
-        // 音声ファイル名の配列
-        const audioFiles = ['p', 'a', 't', 's', 'k'];
-        
-        // 初期化
-        let videoDuration = 0;
-        let isPlaying = false;
-        let lastVolume = 1;
-        let currentPlaybackRate = 1;
-        let isFullscreen = false;
-        
-        // 動画のメタデータが読み込まれたら
-        video.addEventListener('loadedmetadata', function() {
-            try {
-                videoDuration = video.duration;
-                endTimeInput.value = videoDuration.toFixed(2);
-                endTimeInput.max = videoDuration;
-                startTimeInput.max = videoDuration - 0.1;
-                updateTimeDisplay();
+                console.error(`音声ファイル初期化エラー (${file}.mp3):`, error);
                 checkLoadingComplete();
-            } catch (error) {
-                handleError(error, '動画メタデータ読み込み中にエラーが発生しました');
             }
         });
-        
-        // 動画エラー処理
-        video.addEventListener('error', function() {
-            handleError(video.error, '動画読み込み中にエラーが発生しました');
-        });
-        
-        // 再生ボタンクリック
-        playPauseBtn.addEventListener('click', function() {
-            try {
-                // 現在の秒数が終了秒数を超えている場合は開始位置に戻す
-                const endTime = parseFloat(endTimeInput.value) || videoDuration;
-                if (video.currentTime >= endTime) {
-                    const startTime = parseFloat(startTimeInput.value) || 0;
-                    seekMedia(startTime);
+    }
+
+    // 音声を結合する関数
+    async function combineAudio() {
+        if (!audioContext) {
+            combineStatus.textContent = "Web Audio APIが利用できません";
+            return;
+        }
+
+        combineButton.disabled = true;
+        combineStatus.textContent = "音声を合成中...";
+
+        try {
+            // 現在の音量設定を保存
+            audioFiles.forEach(file => {
+                currentVolumes[file] = parseFloat(document.querySelector(`.audio-slider[data-audio="${file}"]`).value);
+            });
+
+            // 各音声ファイルをデコード
+            const audioBufferPromises = audioFiles.map(async file => {
+                const audio = audioElements[file];
+                if (!audio) return null;
+
+                const response = await fetch(`${file}.mp3`);
+                const arrayBuffer = await response.arrayBuffer();
+                return await audioContext.decodeAudioData(arrayBuffer);
+            });
+
+            // すべての音声バッファを取得
+            const buffers = await Promise.all(audioBufferPromises);
+            audioFiles.forEach((file, index) => {
+                audioBuffers[file] = buffers[index];
+            });
+
+            // 最長の音声バッファの長さを取得
+            const maxDuration = Math.max(...buffers.filter(b => b).map(b => b.duration));
+
+            // 新しい音声バッファを作成
+            combinedAudioBuffer = audioContext.createBuffer(
+                2, // ステレオ
+                audioContext.sampleRate * maxDuration,
+                audioContext.sampleRate
+            );
+
+            // 各音声バッファを結合
+            for (let file of audioFiles) {
+                if (!audioBuffers[file]) continue;
+
+                const buffer = audioBuffers[file];
+                const volume = currentVolumes[file];
+
+                // 音量が0の場合はスキップ
+                if (volume === 0) continue;
+
+                // 各チャンネルに音声を加算
+                for (let channel = 0; channel < 2; channel++) {
+                    const inputData = buffer.getChannelData(channel % buffer.numberOfChannels);
+                    const outputData = combinedAudioBuffer.getChannelData(channel);
+
+                    for (let i = 0; i < inputData.length; i++) {
+                        outputData[i] += inputData[i] * volume;
+                    }
                 }
+            }
+
+            // 音量を正規化 (クリッピング防止)
+            for (let channel = 0; channel < 2; channel++) {
+                const outputData = combinedAudioBuffer.getChannelData(channel);
+                let max = 0;
                 
-                togglePlayPause();
-            } catch (error) {
-                handleError(error, '再生/一時停止操作中にエラーが発生しました');
+                for (let i = 0; i < outputData.length; i++) {
+                    if (Math.abs(outputData[i]) > max) {
+                        max = Math.abs(outputData[i]);
+                    }
+                }
+
+                if (max > 1) {
+                    for (let i = 0; i < outputData.length; i++) {
+                        outputData[i] /= max;
+                    }
+                }
             }
-        });
+
+            isAudioCombined = true;
+            combineStatus.textContent = "音声の合成が完了しました";
+            enablePlayerControls();
+            previewSection.style.display = 'block';
+
+            // 合成後に音量と再生速度を適用
+            applyVolume();
+            applyPlaybackRate();
+
+        } catch (error) {
+            console.error('音声合成エラー:', error);
+            combineStatus.textContent = "音声の合成に失敗しました";
+            combineButton.disabled = false;
+        }
+    }
+
+    // 音量を適用
+    function applyVolume() {
+        if (!isAudioCombined) return;
+        
+        const globalVolume = parseFloat(globalVolumeSlider.value);
+        // 音量を0-1の範囲に制限
+        const clampedVolume = Math.max(0, Math.min(1, globalVolume));
+        video.volume = clampedVolume;
+        volumeSlider.value = clampedVolume;
+        updateVolumeIcon();
+    }
+
+    // 再生速度を適用（ピッチ維持）
+    function applyPlaybackRate() {
+        if (!isAudioCombined) return;
+        
+        const speed = parseFloat(playbackSpeedSlider.value);
+        currentPlaybackRate = speed;
+        video.playbackRate = speed;
+        
+        if (combinedAudioSource) {
+            combinedAudioSource.playbackRate.value = speed;
+            // ピッチを維持する設定
+                if ('preservesPitch' in combinedAudioSource) {
+                    combinedAudioSource.preservesPitch = value; // モダンブラウザ
+                } else if ('webkitPreservesPitch' in combinedAudioSource) {
+                    combinedAudioSource.webkitPreservesPitch = value; // 古い WebKit (Chrome <86 など)
+                } else if ('mozPreservesPitch' in combinedAudioSource) {
+                    combinedAudioSource.mozPreservesPitch = value; // 古い Gecko (Firefox ≤100)
+                }
+        }
         
-        // 時間表示を更新
-        function updateTimeDisplay() {
-            const now = performance.now();
-            if (now - lastUpdateTime < updateInterval && !isFullscreen) return;
-            lastUpdateTime = now;
+        speedValue.textContent = speed.toFixed(2) + 'x';
+        playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
+        speedSlider.value = speed;
+    }
+
+    // プレイヤーコントロールを有効化
+    function enablePlayerControls() {
+        disabledOverlay.style.display = 'none';
+        playPauseBtn.disabled = false;
+        volumeBtn.disabled = false;
+        volumeSlider.disabled = false;
+        speedSlider.disabled = false;
+        fullscreenBtn.disabled = false;
+        startTimeInput.disabled = false;
+        endTimeInput.disabled = false;
+        loopCheckbox.disabled = false;
+        globalVolumeSlider.disabled = false;
+        setStartTimeBtn.disabled = false;
+        setEndTimeBtn.disabled = false;
+        playbackSpeedSlider.disabled = false;
+        
+        // 合成後に音量と再生速度スライダーを有効化
+        volumeSlider.disabled = false;
+        speedSlider.disabled = false;
+        playbackSpeedSlider.disabled = false;
+    }
+
+    // プレビュー再生
+    function togglePreview() {
+        if (!isAudioCombined || !combinedAudioBuffer) return;
+
+        if (previewButton.textContent === '▶') {
+            // 再生
+            if (combinedAudioSource) {
+                combinedAudioSource.stop();
+            }
+
+            combinedAudioSource = audioContext.createBufferSource();
+            combinedAudioSource.buffer = combinedAudioBuffer;
+            combinedAudioSource.connect(audioContext.destination);
+            combinedAudioSource.start(0);
+
+            previewButton.textContent = '⏸';
             
-            try {
-                const currentTime = video.currentTime;
-                const duration = video.duration || videoDuration;
+            // プレビューの時間表示を更新
+            const updatePreviewTime = () => {
+                if (!combinedAudioSource || !isAudioCombined) return;
                 
-                const currentMinutes = Math.floor(currentTime / 60);
-                const currentSeconds = Math.floor(currentTime % 60);
-                const currentMilliseconds = Math.floor((currentTime % 1) * 100);
-                const durationMinutes = Math.floor(duration / 60);
-                const durationSeconds = Math.floor(duration % 60);
-                const durationMilliseconds = Math.floor((duration % 1) * 100);
+                const currentTime = audioContext.currentTime - combinedAudioSource.startTime;
+                const duration = combinedAudioBuffer.duration;
                 
-                timeDisplay.textContent = 
-                    `${String(currentMinutes).padStart(2, '0')}:${String(currentSeconds).padStart(2, '0')}.${String(currentMilliseconds).padStart(2, '0')} / ` +
-                    `${String(durationMinutes).padStart(2, '0')}:${String(durationSeconds).padStart(2, '0')}.${String(durationMilliseconds).padStart(2, '0')}`;
+                if (currentTime >= duration) {
+                    previewButton.textContent = '▶';
+                    previewTime.textContent = `00:00 / ${formatTime(duration)}`;
+                    return;
+                }
                 
-                // プログレスバーを更新
-                const progressPercent = (currentTime / duration) * 100;
-                progressBar.style.width = `${progressPercent}%`;
-            } catch (error) {
-                handleError(error, '時間表示更新中にエラーが発生しました');
+                previewTime.textContent = `${formatTime(currentTime)} / ${formatTime(duration)}`;
+                requestAnimationFrame(updatePreviewTime);
+            };
+            
+            updatePreviewTime();
+            
+            combinedAudioSource.onended = () => {
+                previewButton.textContent = '▶';
+                previewTime.textContent = `00:00 / ${formatTime(combinedAudioBuffer.duration)}`;
+            };
+        } else {
+            // 一時停止
+            if (combinedAudioSource) {
+                combinedAudioSource.stop();
+                combinedAudioSource = null;
             }
+            previewButton.textContent = '▶';
         }
-        
-        // 再生/一時停止をトグル
-        function togglePlayPause() {
-            if (isPlaying) {
-                pauseMedia();
-            } else {
-                playMedia();
-            }
+    }
+
+    // 時間をフォーマットするヘルパー関数
+    function formatTime(seconds) {
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    }
+
+    // 動画のメタデータが読み込まれたら
+    video.addEventListener('loadedmetadata', function() {
+        try {
+            videoDuration = video.duration;
+            endTimeInput.value = videoDuration.toFixed(2);
+            endTimeInput.max = videoDuration;
+            startTimeInput.max = videoDuration - 0.1;
+            updateTimeDisplay();
+            checkLoadingComplete();
+        } catch (error) {
+            handleError(error, '動画メタデータ読み込み中にエラーが発生しました');
         }
-        
-        // 再生関数
-        function playMedia() {
-            try {
-                const duration = video.duration || videoDuration;
-                const startTime = parseFloat(startTimeInput.value) || 0;
-                const endTime = parseFloat(endTimeInput.value) || duration;
-                
-                // 現在位置が終了時間を超えている場合、開始位置に戻る
-                if (video.currentTime >= endTime) {
-                    video.currentTime = startTime;
-                }
-                
-                // 動画を再生
-                video.play().then(() => {
+    });
+    
+    // 動画エラー処理
+    video.addEventListener('error', function() {
+        handleError(video.error, '動画読み込み中にエラーが発生しました');
+    });
+    
+    // 再生ボタンクリック
+    playPauseBtn.addEventListener('click', function() {
+        const endTime = parseFloat(endTimeInput.value) || videoDuration;
+        if (video.currentTime >= endTime) {
+            const startTime = parseFloat(startTimeInput.value) || 0;
+            seekMedia(startTime);
+        }
+        togglePlayPause();
+    });
+    
+    // 時間表示を更新
+    function updateTimeDisplay() {
+        const now = performance.now();
+        if (now - lastUpdateTime < updateInterval && !isFullscreen) return;
+        lastUpdateTime = now;
+        
+        try {
+            const currentTime = video.currentTime;
+            const duration = video.duration || videoDuration;
+            
+            const currentMinutes = Math.floor(currentTime / 60);
+            const currentSeconds = Math.floor(currentTime % 60);
+            const currentMilliseconds = Math.floor((currentTime % 1) * 100);
+            const durationMinutes = Math.floor(duration / 60);
+            const durationSeconds = Math.floor(duration % 60);
+            const durationMilliseconds = Math.floor((duration % 1) * 100);
+            
+            timeDisplay.textContent = 
+                `${String(currentMinutes).padStart(2, '0')}:${String(currentSeconds).padStart(2, '0')}.${String(currentMilliseconds).padStart(2, '0')} / ` +
+                `${String(durationMinutes).padStart(2, '0')}:${String(durationSeconds).padStart(2, '0')}.${String(durationMilliseconds).padStart(2, '0')}`;
+            
+            const progressPercent = (currentTime / duration) * 100;
+            progressBar.style.width = `${progressPercent}%`;
+        } catch (error) {
+            console.error('時間表示更新エラー:', error);
+        }
+    }
+    
+    // 再生/一時停止をトグル
+    function togglePlayPause() {
+        if (isPlaying) {
+            pauseMedia();
+        } else {
+            playMedia();
+        }
+    }
+    
+    // 再生関数 (改良版)
+    function playMedia() {
+        try {
+            const duration = video.duration || videoDuration;
+            const startTime = parseFloat(startTimeInput.value) || 0;
+            const endTime = parseFloat(endTimeInput.value) || duration;
+            
+            if (video.currentTime >= endTime) {
+                video.currentTime = startTime;
+            }
+            
+            // 動画を再生
+            const playPromise = video.play();
+            
+            if (playPromise !== undefined) {
+                playPromise.then(() => {
                     isPlaying = true;
                     playPauseBtn.textContent = '⏸';
                     
-                    // 音声を再生
-                    audioFiles.forEach(file => {
-                        if (audioElements[file]) {
-                            audioElements[file].currentTime = video.currentTime;
-                            audioElements[file].play().catch(e => {
-                                if (e.name !== 'AbortError') {
-                                    console.error(`音声再生エラー (${file}.mp3):`, e);
-                                }
-                            });
+                    // Web Audio APIで合成音声を再生
+                    if (combinedAudioSource) {
+                        combinedAudioSource.stop();
+                    }
+                    
+                    combinedAudioSource = audioContext.createBufferSource();
+                    combinedAudioSource.buffer = combinedAudioBuffer;
+                    combinedAudioSource.connect(audioContext.destination);
+                    combinedAudioSource.start(0, video.currentTime);
+                    
+                    // 再生速度を設定
+                    video.playbackRate = currentPlaybackRate;
+                    combinedAudioSource.playbackRate.value = currentPlaybackRate;
+                    
+                    // 動画と音声の同期を維持
+                    combinedAudioSource.onended = () => {
+                        if (loopCheckbox.checked) {
+                            video.currentTime = startTime;
+                            playMedia();
+                        } else {
+                            pauseMedia();
                         }
-                    });
+                    };
                 }).catch(error => {
                     console.error('動画再生エラー:', error);
                 });
-            } catch (error) {
-                console.error('メディア再生エラー:', error);
             }
+        } catch (error) {
+            console.error('メディア再生エラー:', error);
         }
-        
-        // 一時停止関数
-        function pauseMedia() {
-            try {
-                video.pause();
-                isPlaying = false;
-                playPauseBtn.textContent = '▶';
-                
-                // 音声を一時停止
-                audioFiles.forEach(file => {
-                    if (audioElements[file]) {
-                        audioElements[file].pause();
-                    }
-                });
-            } catch (error) {
-                console.error('メディア一時停止エラー:', error);
-            }
-        }
-        
-        // 時間更新時の処理
-        video.addEventListener('timeupdate', function() {
-            const duration = video.duration || videoDuration;
-            const endTime = parseFloat(endTimeInput.value) || duration;
-            
-            // 終了時間に達した場合の処理
-            if (video.currentTime >= endTime && endTime > 0) {
-                if (loopCheckbox.checked) {
-                    const startTime = parseFloat(startTimeInput.value) || 0;
-                    video.currentTime = startTime;
-                    
-                    // 音声も同期
-                    audioFiles.forEach(file => {
-                        if (audioElements[file]) {
-                            audioElements[file].currentTime = startTime;
-                            if (isPlaying) {
-                                audioElements[file].play().catch(e => {
-                                    if (e.name !== 'AbortError') {
-                                        console.error(`音声再生エラー (${file}.mp3):`, e);
-                                    }
-                                });
-                            }
-                        }
-                    });
-                } else {
-                    pauseMedia();
-                    video.currentTime = endTime;
-                }
-            }
+    }
+    
+    // 一時停止関数
+    function pauseMedia() {
+        try {
+            video.pause();
+            isPlaying = false;
+            playPauseBtn.textContent = '▶';
             
-            updateTimeDisplay();
-        });
-        
-        // プログレスバークリックでシーク
-        progressContainer.addEventListener('click', function(e) {
-            try {
-                if (!video.duration) return;
-                
-                const rect = this.getBoundingClientRect();
-                const pos = (e.clientX - rect.left) / rect.width;
-                const seekTime = pos * video.duration;
-                
-                seekMedia(seekTime);
-            } catch (error) {
-                handleError(error, 'シーク操作中にエラーが発生しました');
-            }
-        });
-        
-        // 指定した時間にシーク
-        function seekMedia(time) {
-            try {
-                const duration = video.duration || videoDuration;
-                const startTime = parseFloat(startTimeInput.value) || 0;
-                const endTime = parseFloat(endTimeInput.value) || duration;
-                
-                // 範囲内に制限
-                const seekTime = Math.max(startTime, Math.min(time, endTime));
-                
-                video.currentTime = seekTime;
-                
-                // 音声も同期
-                audioFiles.forEach(file => {
-                    if (audioElements[file]) {
-                        audioElements[file].currentTime = seekTime;
-                    }
-                });
-            } catch (error) {
-                handleError(error, 'メディアシーク中にエラーが発生しました');
+            if (combinedAudioSource) {
+                combinedAudioSource.stop();
+                combinedAudioSource = null;
             }
+        } catch (error) {
+            console.error('メディア一時停止エラー:', error);
         }
+    }
+    
+    // 時間更新時の処理
+    video.addEventListener('timeupdate', function() {
+        const duration = video.duration || videoDuration;
+        const endTime = parseFloat(endTimeInput.value) || duration;
         
-        // プログレスバー上でマウス移動時に時間を表示
-        progressContainer.addEventListener('mousemove', function(e) {
-            try {
-                if (!video.duration) return;
-                
-                const rect = this.getBoundingClientRect();
-                const pos = (e.clientX - rect.left) / rect.width;
-                const hoverTime = pos * video.duration;
-                
-                const minutes = Math.floor(hoverTime / 60);
-                const seconds = Math.floor(hoverTime % 60);
-                const milliseconds = Math.floor((hoverTime % 1) * 100);
+        if (video.currentTime >= endTime && endTime > 0) {
+            if (loopCheckbox.checked) {
+                const startTime = parseFloat(startTimeInput.value) || 0;
+                video.currentTime = startTime;
                 
-                progressTime.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(2, '0')}`;
-                progressTime.style.display = 'block';
-                progressTime.style.left = `${pos * 100}%`;
-            } catch (error) {
-                handleError(error, 'プログレスバー操作中にエラーが発生しました');
-            }
-        });
-        
-        progressContainer.addEventListener('mouseleave', function() {
-            progressTime.style.display = 'none';
-        });
-        
-        // 動画クリックで再生/一時停止
-        video.addEventListener('click', function() {
-            togglePlayPause();
-        });
-        
-        // 音量コントロール
-        volumeSlider.addEventListener('input', function() {
-            try {
-                video.volume = this.value;
-                lastVolume = this.value;
-                updateVolumeIcon();
-            } catch (error) {
-                handleError(error, '音量設定中にエラーが発生しました');
-            }
-        });
-        
-        // 音量ボタン
-        volumeBtn.addEventListener('click', function() {
-            try {
-                if (video.volume > 0) {
-                    lastVolume = video.volume;
-                    video.volume = 0;
-                    volumeSlider.value = 0;
-                } else {
-                    video.volume = lastVolume;
-                    volumeSlider.value = lastVolume;
+                if (combinedAudioSource) {
+                    combinedAudioSource.stop();
+                    combinedAudioSource = audioContext.createBufferSource();
+                    combinedAudioSource.buffer = combinedAudioBuffer;
+                    combinedAudioSource.connect(audioContext.destination);
+                    combinedAudioSource.start(0, startTime);
+                    combinedAudioSource.playbackRate.value = currentPlaybackRate;
                 }
-                updateVolumeIcon();
-            } catch (error) {
-                handleError(error, '音量切り替え中にエラーが発生しました');
-            }
-        });
-        
-        // 音量アイコンを更新
-        function updateVolumeIcon() {
-            if (video.volume === 0) {
-                volumeBtn.textContent = '🔇';
-            } else if (video.volume < 0.5) {
-                volumeBtn.textContent = '🔈';
             } else {
-                volumeBtn.textContent = '🔊';
+                pauseMedia();
+                video.currentTime = endTime;
             }
         }
         
-        // 再生速度スライダー (動画プレイヤー)
-        speedSlider.addEventListener('input', function() {
-            try {
-                const speed = parseFloat(this.value);
-                speedValue.textContent = speed.toFixed(2) + 'x';
-                playbackSpeedSlider.value = speed;
-                playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
-                updatePlaybackRate(speed);
-            } catch (error) {
-                handleError(error, '再生速度設定中にエラーが発生しました');
-            }
-        });
+        updateTimeDisplay();
+    });
+    
+    // プログレスバークリックでシーク
+    progressContainer.addEventListener('click', function(e) {
+        if (!video.duration) return;
         
-        // 再生速度スライダー (設定メニュー)
-        playbackSpeedSlider.addEventListener('input', function() {
-            try {
-                const speed = parseFloat(this.value);
-                playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
-                speedSlider.value = speed;
-                speedValue.textContent = speed.toFixed(2) + 'x';
-                updatePlaybackRate(speed);
-            } catch (error) {
-                handleError(error, '再生速度設定中にエラーが発生しました');
-            }
-        });
+        const rect = this.getBoundingClientRect();
+        const pos = (e.clientX - rect.left) / rect.width;
+        const seekTime = pos * video.duration;
         
-        function updatePlaybackRate(speed) {
-            try {
-                currentPlaybackRate = speed;
-                video.playbackRate = speed;
+        seekMedia(seekTime);
+    });
+    
+    // 指定した時間にシーク (改良版)
+    function seekMedia(time) {
+        try {
+            const duration = video.duration || videoDuration;
+            const startTime = parseFloat(startTimeInput.value) || 0;
+            const endTime = parseFloat(endTimeInput.value) || duration;
+            
+            const seekTime = Math.max(startTime, Math.min(time, endTime));
+            video.currentTime = seekTime;
+            
+            if (combinedAudioSource) {
+                combinedAudioSource.stop();
+                combinedAudioSource = audioContext.createBufferSource();
+                combinedAudioBuffer = combinedAudioBuffer;
+                combinedAudioSource.connect(audioContext.destination);
                 
-                // 音声の再生速度を変更
-                audioFiles.forEach(file => {
-                    if (audioElements[file]) {
-                        // ピッチ保持を確実にする
-                        setPreservesPitch(audioElements[file], true);
-                        audioElements[file].playbackRate = speed;
-                        
-                        // 再生速度変更後に再度ピッチ保持を確認
-                        setTimeout(() => {
-                            setPreservesPitch(audioElements[file], true);
-                        }, 100);
-                    }
-                });
-            } catch (error) {
-                handleError(error, '再生速度更新中にエラーが発生しました');
+                if (isPlaying) {
+                    combinedAudioSource.start(0, seekTime);
+                    combinedAudioSource.playbackRate.value = currentPlaybackRate;
+                }
             }
+        } catch (error) {
+            console.error('メディアシークエラー:', error);
         }
+    }
+    
+    // プログレスバー上でマウス移動時に時間を表示
+    progressContainer.addEventListener('mousemove', function(e) {
+        if (!video.duration) return;
         
-        // 全画面ボタン
-        fullscreenBtn.addEventListener('click', function() {
-            try {
-                if (!isFullscreen) {
-                    if (videoContainer.requestFullscreen) {
-                        videoContainer.requestFullscreen();
-                    } else if (videoContainer.webkitRequestFullscreen) {
-                        videoContainer.webkitRequestFullscreen();
-                    } else if (videoContainer.msRequestFullscreen) {
-                        videoContainer.msRequestFullscreen();
-                    }
-                } else {
-                    if (document.exitFullscreen) {
-                        document.exitFullscreen();
-                    } else if (document.webkitExitFullscreen) {
-                        document.webkitExitFullscreen();
-                    } else if (document.msExitFullscreen) {
-                        document.msExitFullscreen();
-                    }
-                }
-            } catch (error) {
-                handleError(error, '全画面表示中にエラーが発生しました');
-            }
-        });
+        const rect = this.getBoundingClientRect();
+        const pos = (e.clientX - rect.left) / rect.width;
+        const hoverTime = pos * video.duration;
         
-        // 全画面変更イベント
-        document.addEventListener('fullscreenchange', handleFullscreenChange);
-        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
-        document.addEventListener('msfullscreenchange', handleFullscreenChange);
+        const minutes = Math.floor(hoverTime / 60);
+        const seconds = Math.floor(hoverTime % 60);
+        const milliseconds = Math.floor((hoverTime % 1) * 100);
         
-        function handleFullscreenChange() {
-            isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
-            fullscreenBtn.textContent = isFullscreen ? '⛶' : '⛶';
-            
-            if (isFullscreen) {
-                // 全画面時の処理
-                video.controls = false;
-            } else {
-                // 通常表示時の処理
-                video.controls = false;
-            }
+        progressTime.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${String(milliseconds).padStart(2, '0')}`;
+        progressTime.style.display = 'block';
+        progressTime.style.left = `${pos * 100}%`;
+    });
+    
+    progressContainer.addEventListener('mouseleave', function() {
+        progressTime.style.display = 'none';
+    });
+    
+    // 動画クリックで再生/一時停止
+    video.addEventListener('click', function() {
+        togglePlayPause();
+    });
+    
+    // 音量コントロール
+    volumeSlider.addEventListener('input', function() {
+        if (!isAudioCombined) return;
+        video.volume = this.value;
+        lastVolume = this.value;
+        updateVolumeIcon();
+    });
+    
+    // 音量ボタン
+    volumeBtn.addEventListener('click', function() {
+        if (!isAudioCombined) return;
+        
+        if (video.volume > 0) {
+            lastVolume = video.volume;
+            video.volume = 0;
+            volumeSlider.value = 0;
+        } else {
+            video.volume = lastVolume;
+            volumeSlider.value = lastVolume;
         }
+        updateVolumeIcon();
+    });
+    
+    // 音量アイコンを更新
+    function updateVolumeIcon() {
+        if (video.volume === 0) {
+            volumeBtn.textContent = '🔇';
+        } else if (video.volume < 0.5) {
+            volumeBtn.textContent = '🔈';
+        } else {
+            volumeBtn.textContent = '🔊';
+        }
+    }
+    
+    // 再生速度スライダー (動画プレイヤー)
+    speedSlider.addEventListener('input', function() {
+        if (!isAudioCombined) return;
+        
+        const speed = parseFloat(this.value);
+        speedValue.textContent = speed.toFixed(2) + 'x';
+        playbackSpeedSlider.value = speed;
+        playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
+        updatePlaybackRate(speed);
+    });
+    
+    // 再生速度スライダー (設定メニュー)
+    playbackSpeedSlider.addEventListener('input', function() {
+        if (!isAudioCombined) return;
+        
+        const speed = parseFloat(this.value);
+        playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
+        speedSlider.value = speed;
+        speedValue.textContent = speed.toFixed(2) + 'x';
+        updatePlaybackRate(speed);
+    });
+    
+    function updatePlaybackRate(speed) {
+        if (!isAudioCombined) return;
         
-        // キーボードイベント (ESCで全画面終了)
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'Escape' && isFullscreen) {
-                if (document.exitFullscreen) {
-                    document.exitFullscreen();
-                } else if (document.webkitExitFullscreen) {
-                    document.webkitExitFullscreen();
-                } else if (document.msExitFullscreen) {
-                    document.msExitFullscreen();
-                }
-            }
-        });
+        currentPlaybackRate = speed;
+        video.playbackRate = speed;
         
-        // 音声ファイルをロード (改良版)
-        function loadAudioFiles() {
-            audioFiles.forEach(file => {
-                try {
-                    const audio = new Audio(`${file}.mp3`);
-                    audio.preload = 'auto';
-                    audio.loop = false;
-                    
-                    // 初期ピッチ設定
-                    setPreservesPitch(audio, true);
-                    
-                    // 初期音量設定 (0.5)
-                    audio.volume = 0.5;
-                    
-                    audioElements[file] = audio;
-                    
-                    // 音声が読み込まれたら
-                    const onLoaded = function() {
-                        console.log(`${file}.mp3 loaded`);
-                        setPreservesPitch(audio, true); // 再度ピッチ保持を設定
-                        checkLoadingComplete();
-                        audio.removeEventListener('loadedmetadata', onLoaded);
-                    };
-                    
-                    audio.addEventListener('loadedmetadata', onLoaded);
-                    
-                    // エラー処理
-                    const onError = function() {
-                        handleError(audio.error, `音声ファイル読み込み中にエラーが発生しました (${file}.mp3)`);
-                        checkLoadingComplete(); // エラー時もカウント
-                        audio.removeEventListener('error', onError);
-                    };
-                    
-                    audio.addEventListener('error', onError);
-                    
-                    // 音声ファイルの読み込みを開始
-                    try {
-                        audio.load();
-                    } catch (e) {
-                        console.error(`音声ファイル読み込みエラー (${file}.mp3):`, e);
-                    }
-                } catch (error) {
-                    handleError(error, `音声ファイル初期化中にエラーが発生しました (${file}.mp3)`);
-                    checkLoadingComplete(); // エラー時もカウント
-                }
-            });
+        if (combinedAudioSource) {
+            combinedAudioSource.playbackRate.value = speed;
         }
-        
-        // ボリュームスライダーのイベント (修正版)
-        audioSliders.forEach((slider, index) => {
-            slider.addEventListener('input', function() {
-                try {
-                    const value = parseFloat(this.value);
-                    volumeValues[index].textContent = value.toFixed(2);
-                    
-                    if (audioElements[this.dataset.audio]) {
-                        const globalVolume = parseFloat(globalVolumeSlider.value) / 10;
-                        const calculatedVolume = value * globalVolume;
-                        audioElements[this.dataset.audio].volume = calculatedVolume;
-                        
-                        // スライダーの背景を更新
-                        updateSliderBackgrounds();
-                    }
-                } catch (error) {
-                    handleError(error, '音声ボリューム設定中にエラーが発生しました');
-                }
-            });
-            
-            // 初期値を1.00に設定
-            slider.value = 1;
-            volumeValues[index].textContent = '1.00';
-        });
-        
-        // 全体音量スライダーのイベント (修正版)
-        globalVolumeSlider.addEventListener('input', function() {
-            try {
-                const value = parseFloat(this.value);
-                globalVolumeValue.textContent = value.toFixed(1);
-                
-                audioFiles.forEach(file => {
-                    if (audioElements[file]) {
-                        const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
-                        if (volumeSlider) {
-                            const sliderValue = parseFloat(volumeSlider.value);
-                            const calculatedVolume = sliderValue * (value / 10);
-                            audioElements[file].volume = calculatedVolume;
-                        }
-                    }
-                });
-                
-                // スライダーの背景を更新
-                updateSliderBackgrounds();
-            } catch (error) {
-                handleError(error, '全体音量設定中にエラーが発生しました');
-            }
-        });
-        
-        // 初期全体音量を5.0に設定
-        globalVolumeSlider.value = 5;
-        globalVolumeValue.textContent = '5.0';
-        
-        // ループ設定変更時
-        loopCheckbox.addEventListener('change', function() {
-            try {
-                audioFiles.forEach(file => {
-                    if (audioElements[file]) {
-                        audioElements[file].loop = this.checked;
-                    }
-                });
-            } catch (error) {
-                handleError(error, 'ループ設定変更中にエラーが発生しました');
+    }
+    
+    // 全画面ボタン
+    fullscreenBtn.addEventListener('click', function() {
+        if (!isFullscreen) {
+            if (videoContainer.requestFullscreen) {
+                videoContainer.requestFullscreen();
+            } else if (videoContainer.webkitRequestFullscreen) {
+                videoContainer.webkitRequestFullscreen();
+            } else if (videoContainer.msRequestFullscreen) {
+                videoContainer.msRequestFullscreen();
             }
-        });
-        
-        // 現在の秒数を開始時間に設定
-        setStartTimeBtn.addEventListener('click', function() {
-            try {
-                startTimeInput.value = video.currentTime.toFixed(2);
-            } catch (error) {
-                handleError(error, '開始時間設定中にエラーが発生しました');
+        } else {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            } else if (document.msExitFullscreen) {
+                document.msExitFullscreen();
             }
-        });
-        
-        // 現在の秒数を終了時間に設定
-        setEndTimeBtn.addEventListener('click', function() {
-            try {
-                endTimeInput.value = video.currentTime.toFixed(2);
-            } catch (error) {
-                handleError(error, '終了時間設定中にエラーが発生しました');
+        }
+    });
+    
+    // 全画面変更イベント
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+    document.addEventListener('msfullscreenchange', handleFullscreenChange);
+    
+    function handleFullscreenChange() {
+        isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
+        fullscreenBtn.textContent = isFullscreen ? '⛶' : '⛶';
+        video.controls = false;
+    }
+    
+    // キーボードイベント (ESCで全画面終了)
+    document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && isFullscreen) {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+            } else if (document.webkitExitFullscreen) {
+                document.webkitExitFullscreen();
+            } else if (document.msExitFullscreen) {
+                document.msExitFullscreen();
             }
+        }
+    });
+    
+    // ボリュームスライダーのイベント
+    audioSliders.forEach((slider, index) => {
+        slider.addEventListener('input', function() {
+            const value = parseFloat(this.value);
+            volumeValues[index].textContent = value.toFixed(2);
+            
+            // スライダーの背景を更新
+            const percent = value * 100;
+            this.style.backgroundSize = `${percent}% 100%`;
         });
+    });
+    
+    globalVolumeSlider.addEventListener('input', function() {
+        const value = parseFloat(this.value);
+        // 表示値は0-10の範囲で表示
+        globalVolumeValue.textContent = value.toFixed(1);
         
         // スライダーの背景を更新
-        function updateSliderBackgrounds() {
-            // ボリュームスライダー
-            const volumePercent = volumeSlider.value * 100;
-            volumeSlider.style.backgroundSize = `${volumePercent}% 100%`;
-            
-            // 再生速度スライダー
-            const speedPercent = (speedSlider.value - speedSlider.min) / (speedSlider.max - speedSlider.min) * 100;
-            speedSlider.style.backgroundSize = `${speedPercent}% 100%`;
-            
-            // 全体音量スライダー
-            const globalVolumePercent = (globalVolumeSlider.value - globalVolumeSlider.min) / (globalVolumeSlider.max - globalVolumeSlider.min) * 100;
-            globalVolumeSlider.style.backgroundSize = `${globalVolumePercent}% 100%`;
-            
-            // 再生速度スライダー (設定)
-            const playbackSpeedPercent = (playbackSpeedSlider.value - playbackSpeedSlider.min) / (playbackSpeedSlider.max - playbackSpeedSlider.min) * 100;
-            playbackSpeedSlider.style.backgroundSize = `${playbackSpeedPercent}% 100%`;
-            
-            // 各音声スライダー
-            audioSliders.forEach(slider => {
-                const percent = slider.value * 100;
-                slider.style.backgroundSize = `${percent}% 100%`;
-            });
-        }
+        const percent = (value - this.min) / (this.max - this.min) * 100;
+        this.style.backgroundSize = `${percent}% 100%`;
         
-        // スライダーの初期背景を設定
-        function initSliderBackgrounds() {
-            // すべてのスライダーに背景を設定
-            const sliders = [
-                volumeSlider, 
-                speedSlider, 
-                globalVolumeSlider, 
-                playbackSpeedSlider, 
-                ...audioSliders
-            ];
-            
-            sliders.forEach(slider => {
-                if (slider) {
-                    slider.style.backgroundImage = 'linear-gradient(#64ffda, #64ffda)';
-                    slider.style.backgroundRepeat = 'no-repeat';
-                }
-            });
-            
-            updateSliderBackgrounds();
+        // 合成後に音量を適用（0-1の範囲に変換）
+        if (isAudioCombined) {
+            applyVolume();
         }
-        
-        // スライダー変更時に背景を更新
-        const allSliders = [
+    });
+    
+    // ループ設定変更時
+    loopCheckbox.addEventListener('change', function() {
+        // 合成音声ではループは動画に依存する
+    });
+    
+    // 現在の秒数を開始時間に設定
+    setStartTimeBtn.addEventListener('click', function() {
+        startTimeInput.value = video.currentTime.toFixed(2);
+    });
+    
+    // 現在の秒数を終了時間に設定
+    setEndTimeBtn.addEventListener('click', function() {
+        endTimeInput.value = video.currentTime.toFixed(2);
+    });
+    
+    // 合成ボタンクリック
+    combineButton.addEventListener('click', combineAudio);
+    
+    // プレビューボタンクリック
+    previewButton.addEventListener('click', togglePreview);
+    
+    // 初期化
+    loadAudioFiles();
+    updateVolumeIcon();
+    volumeSlider.value = video.volume;
+    video.controls = false;
+    
+    // スライダーの背景を初期化
+    function initSliderBackgrounds() {
+        const sliders = [
             volumeSlider, 
             speedSlider, 
             globalVolumeSlider, 
@@ -1440,33 +1507,23 @@
             ...audioSliders
         ];
         
-        allSliders.forEach(slider => {
+        sliders.forEach(slider => {
             if (slider) {
-                slider.addEventListener('input', updateSliderBackgrounds);
+                slider.style.backgroundImage = 'linear-gradient(#64ffda, #64ffda)';
+                slider.style.backgroundRepeat = 'no-repeat';
+                
+                if (slider === globalVolumeSlider) {
+                    const percent = (slider.value - slider.min) / (slider.max - slider.min) * 100;
+                    slider.style.backgroundSize = `${percent}% 100%`;
+                } else {
+                    slider.style.backgroundSize = `${slider.value * 100}% 100%`;
+                }
             }
         });
-        
-        // 初期化
-        loadAudioFiles();
-        updateVolumeIcon();
-        volumeSlider.value = video.volume;
-        video.controls = false;
-        initSliderBackgrounds();
-        
-        // 初期音量設定を適用
-        setTimeout(() => {
-            audioFiles.forEach(file => {
-                if (audioElements[file]) {
-                    const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
-                    if (volumeSlider) {
-                        const value = parseFloat(volumeSlider.value);
-                        const globalVolume = parseFloat(globalVolumeSlider.value) / 10;
-                        audioElements[file].volume = value * globalVolume;
-                    }
-                }
-            });
-        }, 1000);
-    });
+    }
+    
+    initSliderBackgrounds();
+});
 </script>
 </body>
 </html>