Update index.html

index.html

@@ -735,771 +735,702 @@
     </div>
     
 <script>
-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';
+    document.addEventListener('DOMContentLoaded', function() {
+        // テクノロジー風背景を生成
+        function createTechBackground() {
+            const bg = document.getElementById('techBg');
             
-            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 < 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);
             }
             
-            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);
+            // グリッドドットを生成
+            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);
+            }
+            
+            // パルスする点を生成
+            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);
+            }
         }
-
-        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';
+        
+        createTechBackground();
+        
+        // ローディング状態を管理
+        let loadingCount = 0;
+        let totalToLoad = 6; // 動画 + 5音声ファイル
+        let lastUpdateTime = 0;
+        const updateInterval = 1; // 50msごとに更新 (20fps)
+        
+        // ローディング完了チェック
+        function checkLoadingComplete() {
+            loadingCount++;
+            if (loadingCount >= totalToLoad) {
                 setTimeout(function() {
-                    loadingOverlay.style.display = 'none';
-                }, 1000);
-            }, 500);
+                    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 => {
+        
+        // エラーハンドリング関数
+        function handleError(error, message) {
+            console.error(message, error);
+            window.alert(`${message}\n\nエラー詳細: ${error.message}`);
+        }
+        
+        // ピッチ設定関数 (改良版)
+        function setPreservesPitch(el, value) {
             try {
-                const audio = new Audio(`${file}.mp3`);
-                audio.preload = 'auto';
-                audio.loop = false;
-                audioElements[file] = audio;
-                
-                audio.addEventListener('loadedmetadata', function() {
-                    console.log(`${file}.mp3 loaded`);
-                    checkLoadingComplete();
-                });
+                if (el.preservesPitch !== undefined) {
+                    el.preservesPitch = value;
+                } else if (el.webkitPreservesPitch !== undefined) {
+                    el.webkitPreservesPitch = value;
+                } else if (el.mozPreservesPitch !== undefined) {
+                    el.mozPreservesPitch = value;
+                }
                 
-                audio.addEventListener('error', function() {
-                    console.error(`音声ファイル読み込みエラー (${file}.mp3):`, audio.error);
-                    checkLoadingComplete();
-                });
+                // ピッチ保持を確実にするための追加設定
+                if (el.playbackRate !== undefined) {
+                    const rate = el.playbackRate;
+                    // 一度1.0に戻してから再設定
+                    el.playbackRate = 1.0;
+                    el.playbackRate = rate;
+                }
             } catch (error) {
-                console.error(`音声ファイル初期化エラー (${file}.mp3):`, 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();
                 checkLoadingComplete();
+            } catch (error) {
+                handleError(error, '動画メタデータ読み込み中にエラーが発生しました');
             }
         });
-    }
-
-    // 音声を結合する関数
-    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;
-                    }
+        
+        // 動画エラー処理
+        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);
                 }
-            }
-
-            // 音量を正規化 (クリッピング防止)
-            for (let channel = 0; channel < 2; channel++) {
-                const outputData = combinedAudioBuffer.getChannelData(channel);
-                let max = 0;
                 
-                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;
-                    }
-                }
+                togglePlayPause();
+            } catch (error) {
+                handleError(error, '再生/一時停止操作中にエラーが発生しました');
             }
-
-            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)
-                }
-        }
+        });
         
-        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 = '⏸';
+        // 時間表示を更新
+        function updateTimeDisplay() {
+            const now = performance.now();
+            if (now - lastUpdateTime < updateInterval && !isFullscreen) return;
+            lastUpdateTime = now;
             
-            // プレビューの時間表示を更新
-            const updatePreviewTime = () => {
-                if (!combinedAudioSource || !isAudioCombined) return;
+            try {
+                const currentTime = video.currentTime;
+                const duration = video.duration || videoDuration;
                 
-                const currentTime = audioContext.currentTime - combinedAudioSource.startTime;
-                const duration = combinedAudioBuffer.duration;
+                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);
                 
-                if (currentTime >= duration) {
-                    previewButton.textContent = '▶';
-                    previewTime.textContent = `00:00 / ${formatTime(duration)}`;
-                    return;
-                }
+                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')}`;
                 
-                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;
+                // プログレスバーを更新
+                const progressPercent = (currentTime / duration) * 100;
+                progressBar.style.width = `${progressPercent}%`;
+            } catch (error) {
+                handleError(error, '時間表示更新中にエラーが発生しました');
             }
-            previewButton.textContent = '▶';
-        }
-    }
-
-    // 時間をフォーマットするヘルパー関数
-    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, '動画メタデータ読み込み中にエラーが発生しました');
-        }
-    });
-    
-    // 動画エラー処理
-    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;
+        
+        // 再生/一時停止をトグル
+        function togglePlayPause() {
+            if (isPlaying) {
+                pauseMedia();
+            } else {
+                playMedia();
             }
-            
-            // 動画を再生
-            const playPromise = video.play();
-            
-            if (playPromise !== undefined) {
-                playPromise.then(() => {
+        }
+        
+        // 再生関数
+        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(() => {
                     isPlaying = true;
                     playPauseBtn.textContent = '⏸';
                     
-                    // 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();
+                    // 音声を再生
+                    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);
+                                }
+                            });
                         }
-                    };
+                    });
                 }).catch(error => {
                     console.error('動画再生エラー:', error);
                 });
+            } catch (error) {
+                console.error('メディア再生エラー:', error);
             }
-        } catch (error) {
-            console.error('メディア再生エラー:', error);
-        }
-    }
-    
-    // 一時停止関数
-    function pauseMedia() {
-        try {
-            video.pause();
-            isPlaying = false;
-            playPauseBtn.textContent = '▶';
-            
-            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;
         
-        if (video.currentTime >= endTime && endTime > 0) {
-            if (loopCheckbox.checked) {
-                const startTime = parseFloat(startTimeInput.value) || 0;
-                video.currentTime = startTime;
+        // 一時停止関数
+        function pauseMedia() {
+            try {
+                video.pause();
+                isPlaying = false;
+                playPauseBtn.textContent = '▶';
                 
-                if (combinedAudioSource) {
-                    combinedAudioSource.stop();
-                    combinedAudioSource = audioContext.createBufferSource();
-                    combinedAudioSource.buffer = combinedAudioBuffer;
-                    combinedAudioSource.connect(audioContext.destination);
-                    combinedAudioSource.start(0, startTime);
-                    combinedAudioSource.playbackRate.value = currentPlaybackRate;
-                }
-            } else {
-                pauseMedia();
-                video.currentTime = endTime;
+                // 音声を一時停止
+                audioFiles.forEach(file => {
+                    if (audioElements[file]) {
+                        audioElements[file].pause();
+                    }
+                });
+            } catch (error) {
+                console.error('メディア一時停止エラー:', error);
             }
         }
         
-        updateTimeDisplay();
-    });
-    
-    // プログレスバークリックでシーク
-    progressContainer.addEventListener('click', function(e) {
-        if (!video.duration) return;
-        
-        const rect = this.getBoundingClientRect();
-        const pos = (e.clientX - rect.left) / rect.width;
-        const seekTime = pos * video.duration;
-        
-        seekMedia(seekTime);
-    });
-    
-    // 指定した時間にシーク (改良版)
-    function seekMedia(time) {
-        try {
+        // 時間更新時の処理
+        video.addEventListener('timeupdate', function() {
             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 (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;
+                }
+            }
             
-            if (combinedAudioSource) {
-                combinedAudioSource.stop();
-                combinedAudioSource = audioContext.createBufferSource();
-                combinedAudioBuffer = combinedAudioBuffer;
-                combinedAudioSource.connect(audioContext.destination);
+            updateTimeDisplay();
+        });
+        
+        // プログレスバークリックでシーク
+        progressContainer.addEventListener('click', function(e) {
+            try {
+                if (!video.duration) return;
                 
-                if (isPlaying) {
-                    combinedAudioSource.start(0, seekTime);
-                    combinedAudioSource.playbackRate.value = currentPlaybackRate;
-                }
+                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, 'メディアシーク中にエラーが発生しました');
             }
-        } catch (error) {
-            console.error('メディアシークエラー:', error);
         }
-    }
-    
-    // プログレスバー上でマウス移動時に時間を表示
-    progressContainer.addEventListener('mousemove', function(e) {
-        if (!video.duration) return;
         
-        const rect = this.getBoundingClientRect();
-        const pos = (e.clientX - rect.left) / rect.width;
-        const hoverTime = pos * video.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);
+                
+                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, 'プログレスバー操作中にエラーが発生しました');
+            }
+        });
         
-        const minutes = Math.floor(hoverTime / 60);
-        const seconds = Math.floor(hoverTime % 60);
-        const milliseconds = Math.floor((hoverTime % 1) * 100);
+        progressContainer.addEventListener('mouseleave', function() {
+            progressTime.style.display = 'none';
+        });
         
-        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;
+        // 動画クリックで再生/一時停止
+        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;
+                }
+                updateVolumeIcon();
+            } catch (error) {
+                handleError(error, '音量切り替え中にエラーが発生しました');
+            }
+        });
+        
+        // 音量アイコンを更新
+        function updateVolumeIcon() {
+            if (video.volume === 0) {
+                volumeBtn.textContent = '🔇';
+            } else if (video.volume < 0.5) {
+                volumeBtn.textContent = '🔈';
+            } else {
+                volumeBtn.textContent = '🔊';
+            }
         }
-        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;
         
-        currentPlaybackRate = speed;
-        video.playbackRate = speed;
+        // 再生速度スライダー (動画プレイヤー)
+        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, '再生速度設定中にエラーが発生しました');
+            }
+        });
         
-        if (combinedAudioSource) {
-            combinedAudioSource.playbackRate.value = speed;
+        // 再生速度スライダー (設定メニュー)
+        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, '再生速度設定中にエラーが発生しました');
+            }
+        });
+        
+        function updatePlaybackRate(speed) {
+            try {
+                currentPlaybackRate = speed;
+                video.playbackRate = speed;
+                
+                // 音声の再生速度を変更
+                audioFiles.forEach(file => {
+                    if (audioElements[file]) {
+                        // ピッチ保持を確実にする
+                        setPreservesPitch(audioElements[file], true);
+                        audioElements[file].playbackRate = speed;
+                        
+                        // 再生速度変更後に再度ピッチ保持を確認
+                        setTimeout(() => {
+                            setPreservesPitch(audioElements[file], true);
+                        }, 100);
+                    }
+                });
+            } 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();
+        
+        // 全画面ボタン
+        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, '全画面表示中にエラーが発生しました');
             }
-        } else {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            } else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
+        });
+        
+        // 全画面変更イベント
+        document.addEventListener('fullscreenchange', handleFullscreenChange);
+        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
+        document.addEventListener('msfullscreenchange', handleFullscreenChange);
+        
+        function handleFullscreenChange() {
+            isFullscreen = !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
+            fullscreenBtn.textContent = isFullscreen ? '⛶' : '⛶';
+            
+            if (isFullscreen) {
+                // 全画面時の処理
+                video.controls = false;
+            } else {
+                // 通常表示時の処理
+                video.controls = false;
             }
         }
-    });
-    
-    // 全画面変更イベント
-    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();
+        
+        // キーボードイベント (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();
+                }
             }
+        });
+        
+        // 音声ファイルをロード (改良版)
+        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);
+                    
+                    // 音声ファイルの読み込みを開始
+                    audio.load().catch(e => {
+                        console.error(`音声ファイル読み込みエラー (${file}.mp3):`, e);
+                    });
+                } catch (error) {
+                    handleError(error, `音声ファイル初期化中にエラーが発生しました (${file}.mp3)`);
+                    checkLoadingComplete(); // エラー時もカウント
+                }
+            });
         }
-    });
-    
-    // ボリュームスライダーのイベント
-    audioSliders.forEach((slider, index) => {
-        slider.addEventListener('input', function() {
-            const value = parseFloat(this.value);
-            volumeValues[index].textContent = value.toFixed(2);
+        
+        // ボリュームスライダーのイベント (修正版)
+        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, '音声ボリューム設定中にエラーが発生しました');
+                }
+            });
             
-            // スライダーの背景を更新
-            const percent = value * 100;
-            this.style.backgroundSize = `${percent}% 100%`;
+            // 初期値を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, 'ループ設定変更中にエラーが発生しました');
+            }
+        });
+        
+        // 現在の秒数を開始時間に設定
+        setStartTimeBtn.addEventListener('click', function() {
+            try {
+                startTimeInput.value = video.currentTime.toFixed(2);
+            } catch (error) {
+                handleError(error, '開始時間設定中にエラーが発生しました');
+            }
+        });
+        
+        // 現在の秒数を終了時間に設定
+        setEndTimeBtn.addEventListener('click', function() {
+            try {
+                endTimeInput.value = video.currentTime.toFixed(2);
+            } catch (error) {
+                handleError(error, '終了時間設定中にエラーが発生しました');
+            }
         });
-    });
-    
-    globalVolumeSlider.addEventListener('input', function() {
-        const value = parseFloat(this.value);
-        // 表示値は0-10の範囲で表示
-        globalVolumeValue.textContent = value.toFixed(1);
         
         // スライダーの背景を更新
-        const percent = (value - this.min) / (this.max - this.min) * 100;
-        this.style.backgroundSize = `${percent}% 100%`;
+        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%`;
+            });
+        }
         
-        // 合成後に音量を適用（0-1の範囲に変換）
-        if (isAudioCombined) {
-            applyVolume();
+        // スライダーの初期背景を設定
+        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();
         }
-    });
-    
-    // ループ設定変更時
-    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 = [
+        
+        // スライダー変更時に背景を更新
+        const allSliders = [
             volumeSlider, 
             speedSlider, 
             globalVolumeSlider, 
@@ -1507,23 +1438,33 @@ document.addEventListener('DOMContentLoaded', function() {
             ...audioSliders
         ];
         
-        sliders.forEach(slider => {
+        allSliders.forEach(slider => {
             if (slider) {
-                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%`;
-                }
+                slider.addEventListener('input', updateSliderBackgrounds);
             }
         });
-    }
-    
-    initSliderBackgrounds();
-});
+        
+        // 初期化
+        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);
+    });
 </script>
 </body>
 </html>