Spaces:

Justtalk
/

JusTalk

Running

App Files Files Community

mizzzuno commited on Mar 19

Commit

08e8b96

verified ·

1 Parent(s): 4780055

Upload userRegister.html

Browse files

Files changed (1) hide show

templates/userRegister.html +186 -0

templates/userRegister.html ADDED Viewed

	@@ -0,0 +1,186 @@

+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <title>ユーザー音声登録</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      @keyframes pulse-scale {
+        0%,
+        100% {
+          transform: scale(1);
+        }
+        50% {
+          transform: scale(1.1);
+        }
+      }
+      .animate-pulse-scale {
+        animation: pulse-scale 1s infinite;
+      }
+      .record-button {
+        width: 50px;
+        height: 50px;
+        background-color: transparent;
+        border-radius: 50%;
+        border: 2px 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.3s ease;
+      }
+      .record-icon {
+        width: 35px;
+        height: 35px;
+        background-color: #d32f2f;
+        border-radius: 50%;
+        transition: all 0.3s ease;
+      }
+      .record-button.recording .record-icon {
+        border-radius: 4px; /* 録音時に赤い部分だけ四角にする */
+      }
+      .recording .record-icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+      }
+      @media (max-width: 640px) {
+        .container {
+          padding: 2rem;
+        }
+      }
+    </style>
+  </head>
+  <body
+    class="bg-gray-800 text-gray-100 dark:bg-gray-900 dark:text-gray-300 transition-colors"
+  >
+    <div class="container mx-auto p-5 max-w-full sm:max-w-2xl">
+      <div id="people-list" class="space-y-4"></div>
+      <button
+        id="add-btn"
+        class="mt-6 px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
+      >
+        メンバーを追加
+      </button>
+      <!-- 録音画面に戻るボタン -->
+      <button
+        id="backButton"
+        class="mt-6 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
+      >
+        録音画面に戻る
+      </button>
+    </div>
+    <script>
+      let mediaRecorder;
+      let audioChunks = [];
+      let userCount = 0; // 追加されたメンバー数を保持
+      let isRecording = false; // 録音中かどうかを判定するフラグ
+      let currentRecordingButton = null; // 現在録音中のボタンを保持
+      function toggleRecording(button) {
+        button.classList.toggle("recording");
+      }
+      async function startRecording(button) {
+        if (isRecording && currentRecordingButton !== button) return; // 他の人が録音中なら何もしない
+        isRecording = true; // 録音中に設定
+        currentRecordingButton = button; // 録音中のボタンを記録
+        try {
+          const stream = await navigator.mediaDevices.getUserMedia({
+            audio: true,
+          });
+          mediaRecorder = new MediaRecorder(stream);
+          mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);
+          mediaRecorder.onstop = () => {
+            const audioBlob = new Blob(audioChunks, { type: "audio/wav" });
+            console.log("音声データ:", audioBlob);
+            audioChunks = [];
+            isRecording = false; // 録音停止後はフラグを戻す
+            currentRecordingButton = null; // 録音ボタンを解除
+          };
+          mediaRecorder.start();
+          toggleRecording(button);
+        } catch (err) {
+          console.error("マイクアクセスに失敗しました:", err);
+          isRecording = false; // エラー発生時もフラグを戻す
+          currentRecordingButton = null;
+        }
+      }
+      function stopRecording(button) {
+        if (!isRecording) return; // 録音中でない場合は停止しない
+        mediaRecorder.stop();
+        toggleRecording(button);
+      }
+      function handleRecording(e) {
+        const button = e.target.closest(".record-button");
+        if (button) {
+          if (isRecording && currentRecordingButton !== button) {
+            // 他の人が録音中なら反応しない
+            return;
+          }
+          if (mediaRecorder && mediaRecorder.state === "recording") {
+            stopRecording(button);
+          } else {
+            startRecording(button);
+          }
+        }
+      }
+      document.getElementById("add-btn").addEventListener("click", () => {
+        const newItem = document.createElement("div");
+        newItem.className = "flex items-center gap-3 flex-wrap";
+        newItem.innerHTML = `
+          <form
+            action="/submit"
+            method="POST"
+            class="flex items-center space-x-2 w-full sm:w-auto"
+            onsubmit="event.preventDefault();"
+          >
+            <input
+              type="text"
+              placeholder="名前を入力"
+              class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-700 text-white"
+            />
+            <button type="button" class="record-button" aria-label="音声録音開始">
+              <div class="record-icon"></div>
+            </button>
+            <button
+              type="submit"
+              class="submit-button px-4 py-2 border rounded-lg bg-blue-500 text-white hover:bg-blue-600"
+            >
+              送信
+            </button>
+          </form>
+        `;
+        newItem.addEventListener("click", handleRecording);
+        document.getElementById("people-list").appendChild(newItem);
+        userCount++; // 新しいメンバーを追加するたびにカウントを増やす
+      });
+      // 「録音画面に戻る」ボタンの処理
+      document
+        .getElementById("backButton")
+        .addEventListener("click", function () {
+          // メンバーの人数を送信する
+          sendUserCount();
+          // index.htmlに戻る
+          window.location.href = "index.html";
+        });
+      // メンバーの人数を送信する関数
+      function sendUserCount() {
+        console.log(`追加された人数: ${userCount}`);
+        // ここで人数を送信する処理を実行（例: fetchを使ってサーバーに送信）
+      }
+    </script>
+  </body>
+</html>