Update index.html

index.html

@@ -820,18 +820,24 @@
             window.alert(`${message}\n\nエラー詳細: ${error.message}`);
         }
         
-        // ピッチ設定関数（改善版）
+        // ピッチ設定関数 (改良版)
         function setPreservesPitch(el, value) {
             try {
                 if (el.preservesPitch !== undefined) {
                     el.preservesPitch = value;
-                }
-                if (el.webkitPreservesPitch !== undefined) {
+                } else if (el.webkitPreservesPitch !== undefined) {
                     el.webkitPreservesPitch = value;
-                }
-                if (el.mozPreservesPitch !== undefined) {
+                } else if (el.mozPreservesPitch !== undefined) {
                     el.mozPreservesPitch = value;
                 }
+                
+                // ピッチ保持を確実にするための追加設定
+                if (el.playbackRate !== undefined) {
+                    const rate = el.playbackRate;
+                    // 一度1.0に戻してから再設定
+                    el.playbackRate = 1.0;
+                    el.playbackRate = rate;
+                }
             } catch (error) {
                 handleError(error, 'ピッチ設定中にエラーが発生しました');
             }
@@ -1176,9 +1182,14 @@
                 // 音声の再生速度を変更
                 audioFiles.forEach(file => {
                     if (audioElements[file]) {
-                        audioElements[file].playbackRate = speed;
-                        // ピッチ保持を確実に設定
+                        // ピッチ保持を確実にする
                         setPreservesPitch(audioElements[file], true);
+                        audioElements[file].playbackRate = speed;
+                        
+                        // 再生速度変更後に再度ピッチ保持を確認
+                        setTimeout(() => {
+                            setPreservesPitch(audioElements[file], true);
+                        }, 100);
                     }
                 });
             } catch (error) {
@@ -1242,7 +1253,7 @@
             }
         });
         
-        // 音声ファイルをロード
+        // 音声ファイルをロード (改良版)
         function loadAudioFiles() {
             audioFiles.forEach(file => {
                 try {
@@ -1250,28 +1261,39 @@
                     audio.preload = 'auto';
                     audio.loop = false;
                     
-                    // ピッチ保持を確実に設定
+                    // 初期ピッチ設定
                     setPreservesPitch(audio, true);
                     
-                    // 初期音量設定
-                    const slider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
-                    if (slider) {
-                        audio.volume = parseFloat(slider.value) * (parseFloat(globalVolumeSlider.value) / 10);
-                    }
+                    // 初期音量設定 (0.5)
+                    audio.volume = 0.5;
                     
                     audioElements[file] = audio;
                     
                     // 音声が読み込まれたら
-                    audio.addEventListener('loadedmetadata', function() {
+                    const onLoaded = function() {
                         console.log(`${file}.mp3 loaded`);
+                        setPreservesPitch(audio, true); // 再度ピッチ保持を設定
                         checkLoadingComplete();
-                    });
+                        audio.removeEventListener('loadedmetadata', onLoaded);
+                    };
+                    
+                    audio.addEventListener('loadedmetadata', onLoaded);
                     
                     // エラー処理
-                    audio.addEventListener('error', function() {
+                    const onError = function() {
                         handleError(audio.error, `音声ファイル読み込み中にエラーが発生しました (${file}.mp3)`);
                         checkLoadingComplete(); // エラー時もカウント
-                    });
+                        audio.removeEventListener('error', onError);
+                    };
+                    
+                    audio.addEventListener('error', onError);
+                    
+                    // 音声ファイルの読み込みを開始
+                    try {
+                        audio.load();
+                    } catch (e) {
+                        console.error(`音声ファイル読み込みエラー (${file}.mp3):`, e);
+                    }
                 } catch (error) {
                     handleError(error, `音声ファイル初期化中にエラーが発生しました (${file}.mp3)`);
                     checkLoadingComplete(); // エラー時もカウント
@@ -1279,7 +1301,7 @@
             });
         }
         
-        // ボリュームスライダーのイベント
+        // ボリュームスライダ��のイベント (修正版)
         audioSliders.forEach((slider, index) => {
             slider.addEventListener('input', function() {
                 try {
@@ -1288,35 +1310,50 @@
                     
                     if (audioElements[this.dataset.audio]) {
                         const globalVolume = parseFloat(globalVolumeSlider.value) / 10;
-                        audioElements[this.dataset.audio].volume = value * globalVolume;
+                        const calculatedVolume = value * globalVolume;
+                        audioElements[this.dataset.audio].volume = calculatedVolume;
+                        
+                        // スライダーの背景を更新
+                        updateSliderBackgrounds();
                     }
                 } catch (error) {
                     handleError(error, '音声ボリューム設定中にエラーが発生しました');
                 }
             });
+            
+            // 初期値を1.00に設定
+            slider.value = 1;
+            volumeValues[index].textContent = '1.00';
         });
         
-        // 全体音量スライダーのイベント
+        // 全体音量スライダーのイベント (修正版)
         globalVolumeSlider.addEventListener('input', function() {
             try {
                 const value = parseFloat(this.value);
                 globalVolumeValue.textContent = value.toFixed(1);
                 
-                // 各音声の音量を更新
                 audioFiles.forEach(file => {
                     if (audioElements[file]) {
-                        const slider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
-                        if (slider) {
-                            const volume = parseFloat(slider.value) * (value / 10);
-                            audioElements[file].volume = volume;
+                        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 {
@@ -1386,7 +1423,7 @@
             
             sliders.forEach(slider => {
                 if (slider) {
-                    slider.style.backgroundImage = 'linear-gradient(#2d3d57, #2d3d57)';
+                    slider.style.backgroundImage = 'linear-gradient(#64ffda, #64ffda)';
                     slider.style.backgroundRepeat = 'no-repeat';
                 }
             });
@@ -1415,6 +1452,20 @@
         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>