Update index.html:Send audio every 10 seconds

index.html

@@ -73,15 +73,12 @@
   <button class="result-button" id="resultButton" onclick="showResults()">結果を表示</button>
 
   <script>
-
-    function tmp(){
-      console.log("10秒経ったよ");
-    }
-
-
     let isRecording = false;
     let mediaRecorder;
     let audioChunks = [];
+    let isRecordingStopped = false; //自動停止を管理する
+    let recordingInterval;
+
     async function toggleRecording() {
       const recordButton = document.getElementById('recordButton');
       const recordIcon = document.getElementById('recordIcon');
@@ -93,35 +90,25 @@
           const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
           mediaRecorder = new MediaRecorder(stream);
           audioChunks = [];
+          previousAudioChunks = [];
           mediaRecorder.ondataavailable = event => {
             if (event.data.size > 0) {
               audioChunks.push(event.data);
             }
           };
           mediaRecorder.onstop = () => {
-            const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-            const reader = new FileReader();
-            reader.onloadend = () => {
-              const base64String = reader.result.split(',')[1]; // Base64 エンコードされた音声データ
-              // サーバーへ音声データを送信
-              fetch('/upload_audio', {
-                method: 'POST',
-                headers: {
-                  'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ audio_data: base64String }),
-              })
-              .then(response => response.json())
-              .then(data => {
-                alert('音声がバックエンドに送信されました。');
-              })
-              .catch(error => {
-                console.error('エラー:', error);
-              });
-            };
-            reader.readAsDataURL(audioBlob);
+            sendAudioChunks([...audioChunks]);
+            audioChunks = [];
           };
+
           mediaRecorder.start();
+
+          recordingInterval = setInterval(() => {
+            if(isRecording && !isRecordingStopped){
+              isRecordingStopped = true;
+              mediaRecorder.stop();
+            }
+          },10000);
         } catch (error) {
           console.error('マイクへのアクセスに失敗しました:', error);
           isRecording = false;
@@ -131,14 +118,44 @@
         // 録音停止
         isRecording = false;
         recordButton.classList.remove('recording');
+        clearInterval(recordingInterval);
         if (mediaRecorder && mediaRecorder.state !== 'inactive') {
           mediaRecorder.stop();
         }
       }
     }
+
+    function sendAudioChunks(chunks){
+      const audioBlob = new Blob(chunks, { type: 'audio/wav' });
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const base64String = reader.result.split(',')[1]; // Base64 エンコードされた音声データ
+        // サーバーへ音声データを送信
+        fetch('/upload_audio', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ audio_data: base64String }),
+        })
+        .then(response => response.json())
+        .then(data => {
+          alert('音声がバックエンドに送信されました。');
+        })
+        .catch(error => {
+          console.error('エラー:', error);
+        });
+      };
+      reader.readAsDataURL(audioBlob);
+
+      isRecordingStopped = false;
+      mediaRecorder.start();
+    }
+
     function showResults() {
       window.location.href = 'feedback.html';
     }
+
     // Chart.js の初期化
     const ctx = document.getElementById('speechChart').getContext('2d');
     const speechChart = new Chart(ctx, {
@@ -163,9 +180,6 @@
         }
       }
     });
-
-    setInterval(tmp,10000);
-
   </script>
 </body>
 </html>