Update index.html

index.html

@@ -413,12 +413,8 @@
             </div>
         </div>
     </div>
-      <script type="module">
-        // SoundTouchJSを正しくインポート
-        import { SoundTouch, SimpleFilter, PitchShifter } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/soundtouch.min.js';
-        
-        // グローバルにsoundtouchを設定
-        window.soundtouch = { SoundTouch, SimpleFilter, PitchShifter };
+    
+    <script>
         document.addEventListener('DOMContentLoaded', function() {
             // 要素を取得
             const video = document.getElementById('video');
@@ -444,11 +440,7 @@
             const volumeValues = document.querySelectorAll('.volume-value');
             
             // 音声オブジェクトを作成
-            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-            const audioBuffers = {};
-            const audioSources = {};
-            const gainNodes = {};
-            const soundTouchNodes = {};
+            const audioElements = {};
             
             // 音声ファイル名の配列
             const audioFiles = ['p', 'a', 't', 's', 'k'];
@@ -468,11 +460,16 @@
                 startTimeInput.max = videoDuration - 0.1;
                 updateTimeDisplay();
             });
-                document.getElementById('play-pause-btn').addEventListener('click', function() {
-      if (audioContext.state === 'suspended') {
-        audioContext.resume();
-      }
-    });
+            
+            document.getElementById('play-pause-btn').addEventListener('click', function() {
+                // 音声要素の再生を許可
+                audioFiles.forEach(file => {
+                    if (audioElements[file]) {
+                        audioElements[file].play().catch(e => console.log("Audio play failed:", e));
+                    }
+                });
+            });
+            
             // 時間表示を更新
             function updateTimeDisplay() {
                 const currentTime = video.currentTime;
@@ -539,11 +536,8 @@
                 
                 // 音声も同期
                 audioFiles.forEach(file => {
-                    if (audioSources[file]) {
-                        audioSources[file].stop();
-                        if (isPlaying) {
-                            playAudio(file, seekTime);
-                        }
+                    if (audioElements[file]) {
+                        audioElements[file].currentTime = seekTime;
                     }
                 });
             }
@@ -637,15 +631,15 @@
                 updatePlaybackRate(speed);
             });
             
-
             function updatePlaybackRate(speed) {
                 currentPlaybackRate = speed;
                 video.playbackRate = speed;
                 
                 // 音声の再生速度を変更
                 audioFiles.forEach(file => {
-                    if (audioSources[file]) {
-                        audioSources[file].processor.tempo = speed;
+                    if (audioElements[file]) {
+                        audioElements[file].playbackRate = speed;
+                        audioElements[file].preservesPitch = true; // ピッチを保持
                     }
                 });
             }
@@ -677,96 +671,65 @@
                 }
             }
             
-            async function loadAudioFiles() {
-                for (const file of audioFiles) {
-                    try {
-                        const response = await fetch(`${file}.mp3`);
-                        const arrayBuffer = await response.arrayBuffer();
-                        audioBuffers[file] = await audioContext.decodeAudioData(arrayBuffer);
-                        gainNodes[file] = audioContext.createGain();
-                        gainNodes[file].gain.value = 1;
-                    } catch (error) {
-                        console.error(`Error loading ${file}.mp3:`, error);
-                    }
-                }
+            // 音声ファイルをロード
+            function loadAudioFiles() {
+                audioFiles.forEach(file => {
+                    const audio = new Audio(`${file}.mp3`);
+                    audio.preload = 'auto';
+                    audio.preservesPitch = true; // ピッチを保持
+                    audio.loop = false;
+                    audioElements[file] = audio;
+                    
+                    // 音声が読み込まれたら
+                    audio.addEventListener('loadedmetadata', function() {
+                        console.log(`${file}.mp3 loaded`);
+                    });
+                    
+                    // エラー処理
+                    audio.addEventListener('error', function() {
+                        console.error(`Error loading ${file}.mp3`);
+                    });
+                });
             }
             
-function playAudio(file, startTime) {
-    if (!audioBuffers[file]) return;
-
-    // 既存のソースを止める
-    if (audioSources[file]) {
-        try {
-            audioSources[file].stop();
-            audioSources[file].disconnect();
-        } catch (e) {}
-    }
-
-    // 音声ソース
-    const sourceNode = audioContext.createBufferSource();
-    sourceNode.buffer = audioBuffers[file];
-
-    // SoundTouch PitchShifterのAudioNodeを作成
-    const filter = new soundtouch.SimpleFilter(
-        new soundtouch.SoundTouch(audioBuffers[file].sampleRate),
-        new soundtouch.BufferSource(audioBuffers[file])
-    );
-    filter.tempo = currentPlaybackRate;
-    filter.pitch = 1.0;
-
-    const filterNode = soundtouch.getWebAudioNode(audioContext, filter);
-
-    // ボリューム
-    const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
-    const volume = parseFloat(volumeSlider.value) * parseFloat(globalVolumeSlider.value);
-    gainNodes[file] = audioContext.createGain();
-    gainNodes[file].gain.value = volume;
-
-    // 接続
-    sourceNode.connect(filterNode);
-    filterNode.connect(gainNodes[file]);
-    gainNodes[file].connect(audioContext.destination);
-
-    // 再生時間計算
-    const duration = video.duration || videoDuration;
-    const endTime = parseFloat(endTimeInput.value) || duration;
-    const playStartTime = Math.max(startTime, parseFloat(startTimeInput.value) || 0);
-    const playEndTime = Math.min(endTime, duration);
-    const playDuration = playEndTime - playStartTime;
-
-    if (playDuration > 0) {
-        sourceNode.start(audioContext.currentTime, playStartTime);
-        if (!loopCheckbox.checked) {
-            setTimeout(() => {
-                sourceNode.stop();
-            }, playDuration * 1000);
-        }
-    }
-    audioSources[file] = sourceNode;
-}
-
-
-
-            function pauseMedia() {
-                if (!isPlaying) return;
+            function playAudio(file, startTime) {
+                if (!audioElements[file]) return;
                 
-                video.pause();
-                audioFiles.forEach(file => {
-                    if (audioSources[file]) {
-                        try {
-                            audioSources[file].source.stop();
-                            audioSources[file].processor.disconnect();
-                        } catch (e) {
-                            console.log("Audio source already stopped");
-                        }
-                        audioSources[file] = null;
-                    }
-                });
+                const audio = audioElements[file];
+                const duration = video.duration || videoDuration;
+                const endTime = parseFloat(endTimeInput.value) || duration;
                 
-                isPlaying = false;
-                isVideoPlaying = false;
-                playPauseBtn.textContent = '▶';
+                // ボリューム設定
+                const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
+                const volume = parseFloat(volumeSlider.value) * parseFloat(globalVolumeSlider.value);
+                audio.volume = volume;
+                
+                // 再生速度設定
+                audio.playbackRate = currentPlaybackRate;
+                audio.preservesPitch = true;
+                
+                // 再生時間計算
+                const playStartTime = Math.max(startTime, parseFloat(startTimeInput.value) || 0);
+                const playEndTime = Math.min(endTime, duration);
+                
+                audio.currentTime = playStartTime;
+                
+                // 再生
+                audio.play().catch(e => console.log("Audio play failed:", e));
+                
+                // ループ設定
+                audio.loop = loopCheckbox.checked;
+                
+                if (!loopCheckbox.checked) {
+                    // ループ再生でない場合、終了時間に達したら停止
+                    setTimeout(() => {
+                        if (audio.currentTime >= playEndTime) {
+                            audio.pause();
+                        }
+                    }, (playEndTime - playStartTime) * 1000);
+                }
             }
+            
             // 再生関数
             function playMedia() {
                 const startTime = video.currentTime;
@@ -788,9 +751,7 @@ function playAudio(file, startTime) {
                 
                 // 音声を再生
                 audioFiles.forEach(file => {
-                    if (audioBuffers[file]) {
-                        playAudio(file, video.currentTime);
-                    }
+                    playAudio(file, video.currentTime);
                 });
             }
             
@@ -800,13 +761,8 @@ function playAudio(file, startTime) {
                 
                 video.pause();
                 audioFiles.forEach(file => {
-                    if (audioSources[file]) {
-                        try {
-                            audioSources[file].stop();
-                        } catch(e) {
-                            console.log("Audio source already stopped");
-                        }
-                        audioSources[file] = null;
+                    if (audioElements[file]) {
+                        audioElements[file].pause();
                     }
                 });
                 
@@ -821,9 +777,9 @@ function playAudio(file, startTime) {
                     const value = parseFloat(this.value);
                     volumeValues[index].textContent = value.toFixed(2);
                     
-                    if (isPlaying && gainNodes[this.dataset.audio]) {
+                    if (audioElements[this.dataset.audio]) {
                         const globalVolume = parseFloat(globalVolumeSlider.value);
-                        gainNodes[this.dataset.audio].gain.value = value * globalVolume;
+                        audioElements[this.dataset.audio].volume = value * globalVolume;
                     }
                 });
             });
@@ -833,33 +789,22 @@ function playAudio(file, startTime) {
                 const value = parseFloat(this.value);
                 globalVolumeValue.textContent = value.toFixed(1);
                 
-                if (isPlaying) {
-                    audioFiles.forEach(file => {
-                        if (gainNodes[file]) {
-                            const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
-                            const volume = parseFloat(volumeSlider.value) * value;
-                            gainNodes[file].gain.value = volume;
-                        }
-                    });
-                }
+                audioFiles.forEach(file => {
+                    if (audioElements[file]) {
+                        const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
+                        const volume = parseFloat(volumeSlider.value) * value;
+                        audioElements[file].volume = volume;
+                    }
+                });
             });
             
             // ループ設定変更時
             loopCheckbox.addEventListener('change', function() {
-                if (isPlaying) {
-                    // 再生中の場合は音声を再起動
-                    const currentTime = video.currentTime;
-                    audioFiles.forEach(file => {
-                        if (audioSources[file]) {
-                            try {
-                                audioSources[file].stop();
-                            } catch(e) {
-                                console.log("Audio source already stopped");
-                            }
-                            playAudio(file, currentTime);
-                        }
-                    });
-                }
+                audioFiles.forEach(file => {
+                    if (audioElements[file]) {
+                        audioElements[file].loop = this.checked;
+                    }
+                });
             });
             
             // 初期化