Update index.html

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>高度な音声動画プレイヤー</title>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/soundtouch.min.js"></script>
     <style>
         body {
             font-family: 'Arial', sans-serif;
@@ -444,6 +445,7 @@
             const audioBuffers = {};
             const audioSources = {};
             const gainNodes = {};
+            const soundTouchNodes = {};
             
             // 音声ファイル名の配列
             const audioFiles = ['p', 'a', 't', 's', 'k'];
@@ -453,6 +455,7 @@
             let isPlaying = false;
             let isVideoPlaying = false;
             let lastVolume = 1;
+            let currentPlaybackRate = 1;
             
             // 動画のメタデータが読み込まれたら
             video.addEventListener('loadedmetadata', function() {
@@ -627,15 +630,15 @@
                 updatePlaybackRate(speed);
             });
             
-            // 再生速度を更新 (音の高さは変更しない)
+            // 再生速度を更新 (音の高さを保持)
             function updatePlaybackRate(speed) {
+                currentPlaybackRate = speed;
                 video.playbackRate = speed;
                 
-                // 音声の再生速度も更新
+                // 音声の再生速度を変更 (SoundTouchJSが音の高さを保持)
                 audioFiles.forEach(file => {
-                    if (audioSources[file]) {
-                        // 音声の再生速度を変更しても音の高さは変わらない
-                        audioSources[file].playbackRate.value = speed;
+                    if (soundTouchNodes[file]) {
+                        soundTouchNodes[file].tempo = speed;
                     }
                 });
             }
@@ -677,6 +680,11 @@
                             audioBuffers[file] = audioBuffer;
                             gainNodes[file] = audioContext.createGain();
                             gainNodes[file].gain.value = 1;
+                            
+                            // SoundTouchノードを作成
+                            soundTouchNodes[file] = new soundtouch.SoundTouch(audioBuffer.sampleRate);
+                            soundTouchNodes[file].tempo = currentPlaybackRate;
+                            soundTouchNodes[file].pitch = 1; // ピッチ変更なし
                         })
                         .catch(error => console.error(`Error loading ${file}.mp3:`, error));
                 });
@@ -695,9 +703,12 @@
                     }
                 }
                 
+                // SoundTouchプロセッサーを作成
                 const source = audioContext.createBufferSource();
                 source.buffer = audioBuffers[file];
                 
+                const soundTouchProcessor = new soundtouch.SimpleFilter(audioContext, source, soundTouchNodes[file]);
+                
                 // ボリュームスライダーの値を取得
                 const volumeSlider = document.querySelector(`.audio-slider[data-audio="${file}"]`);
                 const volume = parseFloat(volumeSlider.value) * parseFloat(globalVolumeSlider.value);
@@ -706,7 +717,7 @@
                 gainNodes[file].gain.value = volume;
                 
                 // 接続
-                source.connect(gainNodes[file]);
+                soundTouchProcessor.connect(gainNodes[file]);
                 gainNodes[file].connect(audioContext.destination);
                 
                 // 再生
@@ -732,7 +743,7 @@
                 }
                 
                 // 再生速度を同期
-                source.playbackRate.value = video.playbackRate;
+                soundTouchNodes[file].tempo = currentPlaybackRate;
                 
                 audioSources[file] = source;
             }
@@ -791,7 +802,7 @@
                     const value = parseFloat(this.value);
                     volumeValues[index].textContent = value.toFixed(2);
                     
-                    if (isPlaying && audioSources[this.dataset.audio] && gainNodes[this.dataset.audio]) {
+                    if (isPlaying && gainNodes[this.dataset.audio]) {
                         const globalVolume = parseFloat(globalVolumeSlider.value);
                         gainNodes[this.dataset.audio].gain.value = value * globalVolume;
                     }