Update index.html

index.html

@@ -413,11 +413,8 @@
             </div>
         </div>
     </div>
-<script type="module">
-  import * as soundtouch from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/soundtouch.min.js';
-  window.soundtouch = soundtouch;
-</script>
-    <script>
+      <script type="module">
+  import { SoundTouch, SimpleFilter, getWebAudioNode } from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/soundtouch.min.js';
 
         document.addEventListener('DOMContentLoaded', function() {
             // 要素を取得
@@ -697,71 +694,99 @@
       });
     }
             
-function playAudio(file, startTime) {
-    if (!audioBuffers[file]) return;
+    function playAudio(file, startTime) {
+      if (!audioBuffers[file]) return;
 
-    // 既存のソースがあれば停止
-    if (audioSources[file]) {
+      // 既存のソースがあれば停止
+      if (audioSources[file]) {
         try {
-            audioSources[file].stop();
+          audioSources[file].stop();
         } catch(e) {
-            console.log("Audio source already stopped");
+          console.log("Audio source already stopped");
         }
-    }
-
-    const source = audioContext.createBufferSource();
-    source.buffer = audioBuffers[file];
-    
-    // SoundTouch プロセッサーを作成
-    soundTouchNodes[file] = new soundtouch.SoundTouch(audioBuffers[file].sampleRate);
-    soundTouchNodes[file].tempo = currentPlaybackRate;
-    soundTouchNodes[file].pitch = 1; // ピッチ変更なし
-    
-    // SimpleFilter を作成し、Web Audio Node を取得
-    const soundTouchProcessor = new soundtouch.SimpleFilter(audioContext, source, soundTouchNodes[file]);
-    
-    // soundtouch.getWebAudioNode() を使用してノードを取得
-    const soundTouchNode = soundtouch.getWebAudioNode(
-        audioContext, 
-        source, 
-        soundTouchNodes[file]
-    );
+      }
 
-    // ボリュームスライダーの値を取得
-    const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
-    const volume = parseFloat(volumeSlider.value) * parseFloat(globalVolumeSlider.value);
+      const source = audioContext.createBufferSource();
+      source.buffer = audioBuffers[file];
+      
+      // SoundTouch プロセッサーを作成
+      const soundTouch = new SoundTouch(audioBuffers[file].sampleRate);
+      soundTouch.tempo = currentPlaybackRate;
+      soundTouch.pitch = 1;
+      
+      // BufferSourceを作成
+      const bufferSource = new soundtouch.BufferSource(audioBuffers[file].getChannelData(0));
+      
+      // SimpleFilterを作成
+      const filter = new SimpleFilter(soundTouch, bufferSource);
 
-    // ゲインノードを設定
-    gainNodes[file].gain.value = volume;
+      // ScriptProcessorNodeを作成
+      const processor = audioContext.createScriptProcessor(4096, 1, 1);
+      processor.onaudioprocess = (event) => {
+        const outputBuffer = event.outputBuffer.getChannelData(0);
+        const framesExtracted = filter.extract(outputBuffer, outputBuffer.length);
+        if (framesExtracted === 0) {
+          processor.disconnect();
+        }
+      };
 
-    // 接続
-    soundTouchNode.connect(gainNodes[file]);
-    gainNodes[file].connect(audioContext.destination);
+      // ボリュームコントロール
+      const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
+      const volume = parseFloat(volumeSlider.value) * parseFloat(globalVolumeSlider.value);
+      gainNodes[file].gain.value = volume;
 
-    // 再生
-    const duration = video.duration || videoDuration;
-    const endTime = parseFloat(endTimeInput.value) || duration;
-    const loop = loopCheckbox.checked;
+      // 接続チェーン
+      source.connect(processor);
+      processor.connect(gainNodes[file]);
+      gainNodes[file].connect(audioContext.destination);
 
-    // 再生範囲を計算
-    const playStartTime = Math.max(startTime, parseFloat(startTimeInput.value) || 0);
-    const playEndTime = Math.min(endTime, duration);
-    const playDuration = playEndTime - playStartTime;
+      // 再生時間計算
+      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) {
+      if (playDuration > 0) {
         source.start(0, playStartTime, playDuration);
-    }
+      }
 
-    // ループ設定
-    if (loop) {
+      // ループ設定
+      if (loopCheckbox.checked) {
         source.loop = true;
         source.loopStart = parseFloat(startTimeInput.value) || 0;
         source.loopEnd = endTime;
+      }
+
+      audioSources[file] = {
+        source: source,
+        processor: processor,
+        filter: filter
+      };
+      soundTouchNodes[file] = soundTouch;
     }
 
-    audioSources[file] = source;
-}
+    // 一時停止関数も修正
+    function pauseMedia() {
+      if (!isPlaying) 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;
+        }
+      });
+      
+      isPlaying = false;
+      isVideoPlaying = false;
+      playPauseBtn.textContent = '▶';
+    }
             
             // 再生関数
             function playMedia() {