Update index.html

index.html

@@ -78,6 +78,7 @@
     </button>
     <button class="result-button" onclick="showResults()">結果を表示</button>
     <script>
+        
         let isRecording = false;
 
         function toggleRecording() {
@@ -120,5 +121,70 @@
             }
         });
     </script>
+
+    <script>
+        let mode = 'False';
+        let mediaRecorder;
+        let audioChunks = [];
+        const startRecordingBtn = document.getElementById('recordButton');
+        const sendToServerBtn = document.getElementById('result-button');
+    
+        // 音声録音の開始
+        startRecordingBtn.addEventListener('click', async () => {
+         if (mode){
+            mediaRecorder.stop();
+            startRecordingBtn.disabled = false;
+            stopRecordingBtn.disabled = true;
+            mode = 'False';
+         }
+          const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+          mediaRecorder = new MediaRecorder(stream);
+          
+          mediaRecorder.ondataavailable = event => {
+            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エンコードされた音声データを取得
+              sendToServerBtn.disabled = false;
+              
+              sendToServerBtn.addEventListener('click', () => {
+                // 音声をバックエンドに送信
+                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);
+          };
+    
+          mediaRecorder.start();
+          startRecordingBtn.disabled = true;
+          stopRecordingBtn.disabled = false;
+          mode = 'True';
+        });
+    
+        // 音声録音の停止
+        
+      </script>
+    
 </body>
 </html>