Update index.html

index.html

@@ -735,729 +735,785 @@
     </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);
+            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 < 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 < 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 < 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);
         }
-        
-        createTechBackground();
-        
-        // ローディング状態を管理
-        let loadingCount = 0;
-        let totalToLoad = 6; // 動画 + 5つの音声ファイル
-        let lastUpdateTime = 0;
-        const updateInterval = 1;
-        
-        function checkLoadingComplete() {
-            loadingCount++;
-            if (loadingCount >= totalToLoad) {
+
+        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() {
-                    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 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 {
-                    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();
-                    });
-                    
-                    audio.addEventListener('error', function() {
-                        console.error(`音声ファイル読み込みエラー (${file}.mp3):`, audio.error);
-                        checkLoadingComplete();
-                    });
-                } catch (error) {
-                    console.error(`音声ファイル初期化エラー (${file}.mp3):`, error);
-                    checkLoadingComplete();
-                }
-            });
+                    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);
+    }
 
-        // 音声を結合する関数
-        async function combineAudio() {
-            if (!audioContext) {
-                combineStatus.textContent = "Web Audio APIが利用できません";
-                return;
+    // 要素を取得
+    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 {
+                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();
+                });
+                
+                audio.addEventListener('error', function() {
+                    console.error(`音声ファイル読み込みエラー (${file}.mp3):`, audio.error);
+                    checkLoadingComplete();
+                });
+            } catch (error) {
+                console.error(`音声ファイル初期化エラー (${file}.mp3):`, error);
+                checkLoadingComplete();
             }
+        });
+    }
 
-            combineButton.disabled = true;
-            combineStatus.textContent = "音声を合成中...";
+    // 音声を結合する関数
+    async function combineAudio() {
+        if (!audioContext) {
+            combineStatus.textContent = "Web Audio APIが利用できません";
+            return;
+        }
 
-            try {
-                // 各音声ファイルをデコード
-                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);
-                });
+        combineButton.disabled = true;
+        combineStatus.textContent = "音声を合成中...";
 
-                // すべての音声バッファを取得
-                const buffers = await Promise.all(audioBufferPromises);
-                audioFiles.forEach((file, index) => {
-                    audioBuffers[file] = buffers[index];
-                });
+        try {
+            // 現在の音量設定を保存
+            audioFiles.forEach(file => {
+                currentVolumes[file] = parseFloat(document.querySelector(`.audio-slider[data-audio="${file}"]`).value);
+            });
 
-                // 最長の音声バッファの長さを取得
-                const maxDuration = Math.max(...buffers.filter(b => b).map(b => b.duration));
+            // 各音声ファイルをデコード
+            const audioBufferPromises = audioFiles.map(async file => {
+                const audio = audioElements[file];
+                if (!audio) return null;
 
-                // 新しい音声バッファを作成
-                combinedAudioBuffer = audioContext.createBuffer(
-                    2, // ステレオ
-                    audioContext.sampleRate * maxDuration,
-                    audioContext.sampleRate
-                );
+                const response = await fetch(`${file}.mp3`);
+                const arrayBuffer = await response.arrayBuffer();
+                return await audioContext.decodeAudioData(arrayBuffer);
+            });
 
-                // 各音声バッファを結合
-                for (let file of audioFiles) {
-                    if (!audioBuffers[file]) continue;
+            // すべての音声バッファを取得
+            const buffers = await Promise.all(audioBufferPromises);
+            audioFiles.forEach((file, index) => {
+                audioBuffers[file] = buffers[index];
+            });
 
-                    const buffer = audioBuffers[file];
-                    const volume = parseFloat(document.querySelector(`.audio-slider[data-audio="${file}"]`).value);
+            // 最長の音声バッファの長さを取得
+            const maxDuration = Math.max(...buffers.filter(b => b).map(b => b.duration));
 
-                    // 音量が0の場合はスキップ
-                    if (volume === 0) continue;
+            // 新しい音声バッファを作成
+            combinedAudioBuffer = audioContext.createBuffer(
+                2, // ステレオ
+                audioContext.sampleRate * maxDuration,
+                audioContext.sampleRate
+            );
 
-                    // 各チャンネルに音声を加算
-                    for (let channel = 0; channel < 2; channel++) {
-                        const inputData = buffer.getChannelData(channel % buffer.numberOfChannels);
-                        const outputData = combinedAudioBuffer.getChannelData(channel);
+            // 各音声バッファを結合
+            for (let file of audioFiles) {
+                if (!audioBuffers[file]) continue;
 
-                        for (let i = 0; i < inputData.length; i++) {
-                            outputData[i] += inputData[i] * volume;
-                        }
-                    }
-                }
+                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);
-                    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;
-                        }
+                    for (let i = 0; i < inputData.length; i++) {
+                        outputData[i] += inputData[i] * volume;
                     }
                 }
-
-                isAudioCombined = true;
-                combineStatus.textContent = "音声の合成が完了しました";
-                enablePlayerControls();
-                previewSection.style.display = 'block';
-
-            } catch (error) {
-                console.error('音声合成エラー:', error);
-                combineStatus.textContent = "音声の合成に失敗しました";
-                combineButton.disabled = false;
             }
-        }
 
-        // プレイヤーコントロールを有効化
-        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;
-        }
-
-        // プレビュー再生
-        function togglePreview() {
-            if (!isAudioCombined || !combinedAudioBuffer) return;
-
-            if (previewButton.textContent === '▶') {
-                // 再生
-                if (combinedAudioSource) {
-                    combinedAudioSource.stop();
+            // 音量を正規化 (クリッピング防止)
+            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]);
+                    }
                 }
 
-                combinedAudioSource = audioContext.createBufferSource();
-                combinedAudioSource.buffer = combinedAudioBuffer;
-                combinedAudioSource.connect(audioContext.destination);
-                combinedAudioSource.start(0);
-
-                previewButton.textContent = '⏸';
-                
-                // プレビューの時間表示を更新
-                const updatePreviewTime = () => {
-                    if (!combinedAudioSource || !isAudioCombined) return;
-                    
-                    const currentTime = audioContext.currentTime - combinedAudioSource.startTime;
-                    const duration = combinedAudioBuffer.duration;
-                    
-                    if (currentTime >= duration) {
-                        previewButton.textContent = '▶';
-                        previewTime.textContent = `00:00 / ${formatTime(duration)}`;
-                        return;
+                if (max > 1) {
+                    for (let i = 0; i < outputData.length; i++) {
+                        outputData[i] /= max;
                     }
-                    
-                    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 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')}`;
+            isAudioCombined = true;
+            combineStatus.textContent = "音声の合成が完了しました";
+            enablePlayerControls();
+            previewSection.style.display = 'block';
+
+            // 合成後に音量と再生速度を適用
+            applyVolume();
+            applyPlaybackRate();
+
+        } catch (error) {
+            console.error('音声合成エラー:', error);
+            combineStatus.textContent = "音声の合成に失敗しました";
+            combineButton.disabled = 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, '動画メタデータ読み込み中にエラーが発生しました');
-            }
-        });
+    // 音量を適用
+    function applyVolume() {
+        if (!isAudioCombined) return;
         
-        // 動画エラー処理
-        video.addEventListener('error', function() {
-            handleError(video.error, '動画読み込み中にエラーが発生しました');
-        });
+        const globalVolume = parseFloat(globalVolumeSlider.value);
+        video.volume = globalVolume;
+        volumeSlider.value = globalVolume;
+        updateVolumeIcon();
+    }
+
+    // 再生速度を適用
+    function applyPlaybackRate() {
+        if (!isAudioCombined) return;
         
-        // 再生ボタンクリック
-        playPauseBtn.addEventListener('click', function() {
-            const endTime = parseFloat(endTimeInput.value) || videoDuration;
-            if (video.currentTime >= endTime) {
-                const startTime = parseFloat(startTimeInput.value) || 0;
-                seekMedia(startTime);
-            }
-            togglePlayPause();
-        });
+        const speed = parseFloat(playbackSpeedSlider.value);
+        currentPlaybackRate = speed;
+        video.playbackRate = speed;
         
-        // 時間表示を更新
-        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);
-            }
+        if (combinedAudioSource) {
+            combinedAudioSource.playbackRate.value = speed;
         }
         
-        // 再生/一時停止をトグル
-        function togglePlayPause() {
-            if (isPlaying) {
-                pauseMedia();
-            } else {
-                playMedia();
+        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();
             }
-        }
-        
-        // 再生関数 (改良版)
-        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;
-                }
+
+            combinedAudioSource = audioContext.createBufferSource();
+            combinedAudioSource.buffer = combinedAudioBuffer;
+            combinedAudioSource.connect(audioContext.destination);
+            combinedAudioSource.start(0);
+
+            previewButton.textContent = '⏸';
+            
+            // プレビューの時間表示を更新
+            const updatePreviewTime = () => {
+                if (!combinedAudioSource || !isAudioCombined) return;
                 
-                // 動画を再生
-                const playPromise = video.play();
+                const currentTime = audioContext.currentTime - combinedAudioSource.startTime;
+                const duration = combinedAudioBuffer.duration;
                 
-                if (playPromise !== undefined) {
-                    playPromise.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();
-                            }
-                        };
-                    }).catch(error => {
-                        console.error('動画再生エラー:', error);
-                    });
+                if (currentTime >= duration) {
+                    previewButton.textContent = '▶';
+                    previewTime.textContent = `00:00 / ${formatTime(duration)}`;
+                    return;
                 }
-            } 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);
+                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 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;
         
-        // 時間更新時の処理
-        video.addEventListener('timeupdate', function() {
+        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 && endTime > 0) {
-                if (loopCheckbox.checked) {
-                    const startTime = parseFloat(startTimeInput.value) || 0;
-                    video.currentTime = startTime;
+            if (video.currentTime >= endTime) {
+                video.currentTime = startTime;
+            }
+            
+            // 動画を再生
+            const playPromise = video.play();
+            
+            if (playPromise !== undefined) {
+                playPromise.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, startTime);
-                        combinedAudioSource.playbackRate.value = currentPlaybackRate;
                     }
-                } else {
-                    pauseMedia();
-                    video.currentTime = endTime;
-                }
+                    
+                    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);
+        }
+    }
+    
+    // 一時停止関数
+    function pauseMedia() {
+        try {
+            video.pause();
+            isPlaying = false;
+            playPauseBtn.textContent = '▶';
             
-            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);
-        });
+            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;
         
-        // 指定した時間にシーク (改良版)
-        function seekMedia(time) {
-            try {
-                const duration = video.duration || videoDuration;
+        if (video.currentTime >= endTime && endTime > 0) {
+            if (loopCheckbox.checked) {
                 const startTime = parseFloat(startTimeInput.value) || 0;
-                const endTime = parseFloat(endTimeInput.value) || duration;
-                
-                const seekTime = Math.max(startTime, Math.min(time, endTime));
-                video.currentTime = seekTime;
+                video.currentTime = startTime;
                 
                 if (combinedAudioSource) {
                     combinedAudioSource.stop();
                     combinedAudioSource = audioContext.createBufferSource();
-                    combinedAudioBuffer = combinedAudioBuffer;
+                    combinedAudioSource.buffer = combinedAudioBuffer;
                     combinedAudioSource.connect(audioContext.destination);
-                    
-                    if (isPlaying) {
-                        combinedAudioSource.start(0, seekTime);
-                        combinedAudioSource.playbackRate.value = currentPlaybackRate;
-                    }
+                    combinedAudioSource.start(0, startTime);
+                    combinedAudioSource.playbackRate.value = currentPlaybackRate;
                 }
-            } 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;
-            
-            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}%`;
-        });
-        
-        progressContainer.addEventListener('mouseleave', function() {
-            progressTime.style.display = 'none';
-        });
-        
-        // 動画クリックで再生/一時停止
-        video.addEventListener('click', function() {
-            togglePlayPause();
-        });
-        
-        // 音量コントロール
-        volumeSlider.addEventListener('input', function() {
-            video.volume = this.value;
-            lastVolume = this.value;
-            updateVolumeIcon();
-        });
-        
-        // 音量ボタン
-        volumeBtn.addEventListener('click', function() {
-            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 = '🔊';
+                pauseMedia();
+                video.currentTime = endTime;
             }
         }
         
-        // 再生速度スライダー (動画プレイヤー)
-        speedSlider.addEventListener('input', function() {
-            const speed = parseFloat(this.value);
-            speedValue.textContent = speed.toFixed(2) + 'x';
-            playbackSpeedSlider.value = speed;
-            playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
-            updatePlaybackRate(speed);
-        });
+        updateTimeDisplay();
+    });
+    
+    // プログレスバークリックでシーク
+    progressContainer.addEventListener('click', function(e) {
+        if (!video.duration) return;
         
-        // 再生速度スライダー (設定メニュー)
-        playbackSpeedSlider.addEventListener('input', function() {
-            const speed = parseFloat(this.value);
-            playbackSpeedValue.textContent = speed.toFixed(2) + 'x';
-            speedSlider.value = speed;
-            speedValue.textContent = speed.toFixed(2) + 'x';
-            updatePlaybackRate(speed);
-        });
+        const rect = this.getBoundingClientRect();
+        const pos = (e.clientX - rect.left) / rect.width;
+        const seekTime = pos * video.duration;
         
-        function updatePlaybackRate(speed) {
-            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.playbackRate.value = speed;
+                combinedAudioSource.stop();
+                combinedAudioSource = audioContext.createBufferSource();
+                combinedAudioBuffer = combinedAudioBuffer;
+                combinedAudioSource.connect(audioContext.destination);
+                
+                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() {
-            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();
-                }
-            }
-        });
+        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);
-        
-        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();
-                }
-            }
-        });
+        const minutes = Math.floor(hoverTime / 60);
+        const seconds = Math.floor(hoverTime % 60);
+        const milliseconds = Math.floor((hoverTime % 1) * 100);
         
-        // ボリュームスライダーのイベント
-        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%`;
-            });
-        });
+        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;
+        
+        currentPlaybackRate = speed;
+        video.playbackRate = speed;
         
-        // 全体音量スライダーのイベント
-        globalVolumeSlider.addEventListener('input', function() {
+        if (combinedAudioSource) {
+            combinedAudioSource.playbackRate.value = speed;
+        }
+    }
+    
+    // 全画面ボタン
+    fullscreenBtn.addEventListener('click', function() {
+        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();
+            }
+        }
+    });
+    
+    // 全画面変更イベント
+    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);
-            globalVolumeValue.textContent = value.toFixed(1);
+            volumeValues[index].textContent = value.toFixed(2);
             
             // スライダーの背景を更新
-            const percent = (value - this.min) / (this.max - this.min) * 100;
+            const percent = value * 100;
             this.style.backgroundSize = `${percent}% 100%`;
         });
+    });
+    
+    // 全体音量スライダーのイベント
+    globalVolumeSlider.addEventListener('input', function() {
+        const value = parseFloat(this.value);
+        globalVolumeValue.textContent = value.toFixed(1);
         
-        // ループ設定変更時
-        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;
+        // スライダーの背景を更新
+        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';
-                    
-                    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%`;
-                    }
-                }
-            });
+        // 合成後に音量を適用
+        if (isAudioCombined) {
+            applyVolume();
         }
-        
-        initSliderBackgrounds();
     });
+    
+    // ループ設定変更時
+    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, 
+            playbackSpeedSlider, 
+            ...audioSliders
+        ];
+        
+        sliders.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%`;
+                }
+            }
+        });
+    }
+    
+    initSliderBackgrounds();
+});
 </script>
 </body>
 </html>