Update index.html

index.html

@@ -47,8 +47,12 @@
       height: 40px;
       border-radius: 10%;
     }
-    .result-button {
+    .result-buttons {
       margin-top: 20px;
+      display: flex;
+      gap: 10px;
+    }
+    .result-button {
       padding: 10px 20px;
       background-color: #4caf50;
       border: none;
@@ -56,6 +60,7 @@
       color: white;
       cursor: pointer;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+      transition: background-color 0.2s ease;
     }
     .result-button:hover {
       background-color: #388e3c;
@@ -67,25 +72,29 @@
   <div class="chart">
     <canvas id="speechChart"></canvas>
   </div>
+  
   <button class="record-button" id="recordButton" onclick="toggleRecording()">
     <div class="record-icon" id="recordIcon"></div>
   </button>
-  <!-- 結果表示用のボタンは、必要に応じて別画面に遷移させるなどの実装に変更可能です -->
-  <button class="result-button" id="resultButton" onclick="showResults()">結果を表示</button>
-
+  
+  <div class="result-buttons">
+    <button class="result-button" id="historyButton" onclick="showHistory()">会話履歴を表示</button>
+    <button class="result-button" id="feedbackButton" onclick="showResults()">フィードバック画面を表示</button>
+  </div>
+  
   <script>
     let isRecording = false;
     let mediaRecorder;
     let audioChunks = [];
-
-    // Chart.jsの初期化
+    let recordingInterval;
+    
+    // Chart.js の初期化
     const ctx = document.getElementById('speechChart').getContext('2d');
     const speechChart = new Chart(ctx, {
       type: 'doughnut',
       data: {
         labels: ['自分', '他の人'],
         datasets: [{
-          // 初期値は仮のデータとして [30, 70] を設定
           data: [30, 70],
           backgroundColor: ['#4caf50', '#757575'],
         }],
@@ -96,18 +105,15 @@
           legend: {
             display: true,
             position: 'bottom',
-            labels: {
-              color: 'white'
-            }
+            labels: { color: 'white' }
           }
         }
       }
     });
-
+    
     async function toggleRecording() {
       const recordButton = document.getElementById('recordButton');
-      const recordIcon = document.getElementById('recordIcon');
-
+      
       if (!isRecording) {
         // 録音開始
         isRecording = true;
@@ -116,67 +122,90 @@
           const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
           mediaRecorder = new MediaRecorder(stream);
           audioChunks = [];
-
+  
           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 = () => {
-              // Base64エンコードされた文字列を取得
-              const base64String = reader.result.split(',')[1];
-              // サーバーへ音声データを送信
-              fetch('/upload_audio', {
-                method: 'POST',
-                headers: {
-                  'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ audio_data: base64String }),
-              })
-              .then(response => response.json())
-              .then(data => {
-                if(data.error) {
-                  alert('エラー: ' + data.error);
-                  console.error(data.details);
-                  return;
-                }
-                // data.rate はパーセンテージ（例: 40なら自分の音声が40%）\n
-                // 円グラフのデータを更新：自分の音声をdata.rate、他の音声を(100 - data.rate)として設定
-                speechChart.data.datasets[0].data = [data.rate, 100 - data.rate];
-                speechChart.update();
-                alert('音声の解析が完了しました。自分の音声: ' + data.rate.toFixed(2) + '%, 他の人: ' + (100 - data.rate).toFixed(2) + '%');
-              })
-              .catch(error => {
-                console.error('エラー:', error);
-              });
-            };
-            reader.readAsDataURL(audioBlob);
+            sendAudioChunks([...audioChunks]);
+            audioChunks = [];
           };
-
+  
           mediaRecorder.start();
+          // 10秒ごとに自動で停止して送信
+          recordingInterval = setInterval(() => {
+            if (mediaRecorder && mediaRecorder.state === "recording") {
+              mediaRecorder.stop();
+            }
+          }, 10000);
         } catch (error) {
           console.error('マイクへのアクセスに失敗しました:', error);
           isRecording = false;
           recordButton.classList.remove('recording');
         }
       } else {
-        // 録音停止
+        // 手動停止
         isRecording = false;
         recordButton.classList.remove('recording');
-        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+        clearInterval(recordingInterval);
+        if (mediaRecorder && mediaRecorder.state === "recording") {
           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 => {
+          if (data.error) {
+            alert('エラー: ' + data.error);
+            console.error(data.details);
+          } else if (data.rate !== undefined) {
+            // 解析結果が返ってきた場合はチャートを更新
+            speechChart.data.datasets[0].data = [data.rate, 100 - data.rate];
+            speechChart.update();
+            alert('音声の解析が完了しました。自分の音声: ' + data.rate.toFixed(2) + '%, 他の人: ' + (100 - data.rate).toFixed(2) + '%');
+          } else {
+            alert('音声がバックエンドに送信されました。');
+          }
+          // 録音が継続中であれば、再度録音を開始（自動録音の連続処理）
+          if (isRecording && mediaRecorder && mediaRecorder.state === "inactive") {
+            mediaRecorder.start();
+          }
+        })
+        .catch(error => {
+          console.error('エラー:', error);
+          if (isRecording && mediaRecorder && mediaRecorder.state === "inactive") {
+            mediaRecorder.start();
+          }
+        });
+      };
+      reader.readAsDataURL(audioBlob);
+    }
+    
+    function showHistory() {
+      // 会話履歴表示の画面があれば、そのページへ遷移する例
+      // window.location.href = 'history.html';
+      alert('会話履歴を表示する機能は未実装です。');
+    }
+    
     function showResults() {
-      // 結果表示の別画面へ遷移する場合の処理例（必要に応じて実装してください）：
-      // window.location.href = 'feedback.html';
-      alert('結果は円グラフ上に反映されています。');
+      // フィードバック画面へ遷移
+      window.location.href = 'feedback.html';
     }
   </script>
 </body>