Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

rein0421 commited on Mar 14

Commit

6fc04a2

verified ·

1 Parent(s): 29f9ef3

Update index.html

Browse files

Files changed (1) hide show

index.html +151 -113

index.html CHANGED Viewed

@@ -1,124 +1,162 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Voice Recorder Interface</title>
-    <style>
-        body {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            background-color: #121212;
-            color: white;
-        }
-        .chart {
-            width: 300px;
-            height: 300px;
-            margin-bottom: 20px;
-        }
-        .record-button {
-            position: fixed;
-            bottom: 30px;
-            width: 80px;
-            height: 80px;
-            background-color: transparent;
-            border-radius: 50%;
-            border: 4px solid white;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-            transition: all 0.2s ease;
-        }
-        .record-icon {
-            width: 60px;
-            height: 60px;
-            background-color: #d32f2f;
-            border-radius: 50%;
-            transition: all 0.2s ease;
-        }
-        .recording .record-icon {
-            width: 40px;
-            height: 40px;
-            border-radius: 10%;
-        }
-        .result-button {
-            margin-top: 20px;
-            padding: 10px 20px;
-            background-color: #4caf50;
-            border: none;
-            border-radius: 5px;
-            color: white;
-            cursor: pointer;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-        }
-        .result-button:hover {
-            background-color: #388e3c;
-        }
-    </style>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
-    <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" onclick="showResults()">結果を表示</button>
-    <script>
-        let isRecording = false;
-        function toggleRecording() {
-            const recordButton = document.getElementById('recordButton');
-            const recordIcon = document.getElementById('recordIcon');
-            isRecording = !isRecording;
-            if (isRecording) {
-                recordButton.classList.add('recording');
-            } else {
-                recordButton.classList.remove('recording');
             }
         }
-        function showResults() {
-            window.location.href = 'feedback.html';
         }
-        const ctx = document.getElementById('speechChart').getContext('2d');
-        const chart = new Chart(ctx, {
-            type: 'doughnut',
-            data: {
-                labels: ['自分', '他の人'],
-                datasets: [{
-                    data: [30, 70],
-                    backgroundColor: ['#4caf50', '#757575'],
-                }],
-            },
-            options: {
-                responsive: true,
-                plugins: {
-                    legend: {
-                        display: true,
-                        position: 'bottom',
-                        labels: {
-                            color: 'white'
-                        }
-                    }
-                }
             }
-        });
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="ja">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Voice Recorder Interface</title>
+  <style>
+    body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      background-color: #121212;
+      color: white;
+    }
+    .chart {
+      width: 300px;
+      height: 300px;
+      margin-bottom: 20px;
+    }
+    .record-button {
+      position: fixed;
+      bottom: 30px;
+      width: 80px;
+      height: 80px;
+      background-color: transparent;
+      border-radius: 50%;
+      border: 4px solid white;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+      transition: all 0.2s ease;
+    }
+    .record-icon {
+      width: 60px;
+      height: 60px;
+      background-color: #d32f2f;
+      border-radius: 50%;
+      transition: all 0.2s ease;
+    }
+    .recording .record-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 10%;
+    }
+    .result-button {
+      margin-top: 20px;
+      padding: 10px 20px;
+      background-color: #4caf50;
+      border: none;
+      border-radius: 5px;
+      color: white;
+      cursor: pointer;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+    }
+    .result-button:hover {
+      background-color: #388e3c;
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
+  <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>
+  <script>
+    let isRecording = false;
+    let mediaRecorder;
+    let audioChunks = [];
+    async function toggleRecording() {
+      const recordButton = document.getElementById('recordButton');
+      const recordIcon = document.getElementById('recordIcon');
+      if (!isRecording) {
+        // 録音開始
+        isRecording = true;
+        recordButton.classList.add('recording');
+        try {
+          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 = () => {
+              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);
+          };
+          mediaRecorder.start();
+        } catch (error) {
+          console.error('マイクへのアクセスに失敗しました:', error);
+          isRecording = false;
+          recordButton.classList.remove('recording');
         }
+      } else {
+        // 録音停止
+        isRecording = false;
+        recordButton.classList.remove('recording');
+        if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+          mediaRecorder.stop();
         }
+      }
+    }
+    function showResults() {
+      window.location.href = 'feedback.html';
+    }
+    // Chart.js の初期化
+    const ctx = document.getElementById('speechChart').getContext('2d');
+    const speechChart = new Chart(ctx, {
+      type: 'doughnut',
+      data: {
+        labels: ['自分', '他の人'],
+        datasets: [{
+          data: [30, 70],
+          backgroundColor: ['#4caf50', '#757575'],
+        }],
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          legend: {
+            display: true,
+            position: 'bottom',
+            labels: {
+              color: 'white'
             }
+          }
+        }
+      }
+    });
+  </script>
 </body>
 </html>