Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <style> | |
| @charset "UTF-8"; | |
| body { | |
| font-family: Arial, sans-serif; | |
| padding: 20px; | |
| background-color: #f4f4f4; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| h2 { | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #000000cc; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| .container { | |
| max-width: 800px; | |
| background-color: #fff; | |
| padding: 20px 80px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| #transcription { | |
| white-space: pre-wrap; | |
| padding: 10px; | |
| background-color: #e9e9e9; | |
| border-radius: 4px; | |
| margin-bottom: 20px; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| button { | |
| margin: 5px; | |
| padding: 10px 10px; | |
| border: none; | |
| border-radius: 4px; | |
| background-color: #007bff; | |
| color: #fff; | |
| cursor: pointer; | |
| } | |
| .history-button { | |
| margin-top: 20px; | |
| padding: 10px 20px; | |
| background-color: #007bff; | |
| color: white; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| history-button:hover { | |
| background-color: #0056b3; | |
| } | |
| .flex { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .new-person { | |
| text-align: center; | |
| } | |
| .controls { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .record-button { | |
| width: 80px; | |
| height: 80px; | |
| background-color: transparent; | |
| border-radius: 50%; | |
| 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%; | |
| } | |
| .record-p { | |
| border: 2px dashed #0000008c; | |
| } | |
| .disabled { | |
| background-color: gray; | |
| cursor: not-allowed; | |
| } | |
| .record-icon.recording { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 0; | |
| } | |
| .new-person-right-container { | |
| padding-left: 20px; | |
| } | |
| .record-container { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| </style> | |
| <title>ユーザー登録画面</title> | |
| </head> | |
| <body> | |
| <form method="POST"> | |
| <div class="container"> | |
| <h2>ユーザー登録</h2> | |
| <div class="flex"> | |
| <div> | |
| <label for="">ユーザー名</label> | |
| <br /> | |
| <input | |
| type="text" | |
| id="username" | |
| name="username" | |
| placeholder="例：技育 太郎" | |
| required | |
| oninput="validateForm()" | |
| /> | |
| <br /> | |
| <br /> | |
| <label for="">パスワード</label> | |
| <br /> | |
| <input | |
| type="password" | |
| id="password" | |
| name="password" | |
| placeholder="半角数字8文字以上20文字以内" | |
| maxlength="20" | |
| required | |
| oninput="validateForm()" | |
| /> | |
| <br /> | |
| <br /> | |
| <label for=""> パスワード再入力</label> | |
| <br /> | |
| <input | |
| type="password" | |
| id="repassword" | |
| name="repassword" | |
| placeholder="再入力してください" | |
| maxlength="20" | |
| required | |
| oninput="validateForm()" | |
| /> | |
| <p id="passwordError" class="error-message"></p> | |
| <br /> | |
| </div> | |
| <div class="new-person-right-container"> | |
| <label for=""> | |
| 録音ボタンを押した後、10秒間声を録音してください</label | |
| > | |
| <br /> | |
| <p class="record-p"> | |
| 例文：昔々、あるところにおばあさんとおじいさんがいました。<br /> | |
| おばあさんは川に洗濯に、おじいさんは山に芝刈りに行きました。 | |
| </p> | |
| <div class="record-container"> | |
| <button | |
| class="record-button" | |
| id="recordButton" | |
| onclick="toggleRecording()" | |
| > | |
| <div class="record-icon" id="recordIcon"></div> | |
| </button> | |
| </div> | |
| <p id="countdownDisplay"></p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <input | |
| type="submit" | |
| value="会員登録を行う" | |
| name="submit" | |
| id="submit" | |
| class="history-button disabled" | |
| disabled | |
| /> | |
| </div> | |
| </div> | |
| </form> | |
| <script> | |
| let mediaRecorder; | |
| let audioChunks = []; | |
| let countdownTimer; | |
| let isAudioRecorded = false; | |
| async function toggleRecording() { | |
| const recordButton = document.getElementById("recordButton"); | |
| const countdownDisplay = document.getElementById("countdownDisplay"); | |
| recordButton.disabled = true; // ボタンを無効化（連打防止） | |
| countdownDisplay.textContent = "録音中…"; // 初期表示 | |
| isAudioRecorded = false; | |
| recordIcon.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 = () => { | |
| sendAudioChunks([...audioChunks]); // 録音データをサーバーに送信 | |
| audioChunks = []; | |
| recordButton.disabled = false; // ボタンを再度有効化 | |
| countdownDisplay.textContent = ""; // カウントダウンを消す | |
| isAudioRecorded = true; // 録音完了 | |
| recordIcon.classList.remove("recording"); // アイコンを元の丸に戻す | |
| validateForm(); // フォームの状態を更新 | |
| }; | |
| mediaRecorder.start(); | |
| startCountdown(10, countdownDisplay); // 10秒のカウントダウン開始 | |
| // 10秒後に録音を自動停止 | |
| setTimeout(() => { | |
| if (mediaRecorder.state === "recording") { | |
| mediaRecorder.stop(); | |
| } | |
| }, 10000); | |
| } catch (error) { | |
| console.error("マイクのアクセスに失敗しました:", error); | |
| recordButton.disabled = false; // ボタンを再度有効化 | |
| countdownDisplay.textContent = ""; // カウントダウンを消す | |
| recordIcon.classList.remove("recording"); // アイコンを元の丸に戻す | |
| } | |
| } | |
| function startCountdown(seconds, displayElement) { | |
| let remaining = seconds; | |
| displayElement.textContent = `録音終了まで: ${remaining}秒`; | |
| countdownTimer = setInterval(() => { | |
| remaining--; | |
| displayElement.textContent = `録音終了まで: ${remaining}秒`; | |
| if (remaining <= 0) { | |
| clearInterval(countdownTimer); // カウントダウン終了 | |
| } | |
| }, 1000); | |
| } | |
| 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); | |
| } | |
| // フォームの入力状態をチェック | |
| function validateForm() { | |
| const username = document.getElementById("username").value.trim(); | |
| const password = document.getElementById("password").value.trim(); | |
| const repassword = document.getElementById("repassword").value.trim(); | |
| const submitButton = document.getElementById("submit"); | |
| const passwordError = document.getElementById("passwordError"); | |
| if (password !== repassword) { | |
| passwordError.textContent = "パスワードが一致しません。"; | |
| submitButton.classList.add("disabled"); | |
| submitButton.disabled = true; | |
| return; | |
| } else { | |
| passwordError.textContent = ""; | |
| } | |
| if ( | |
| username !== "" && | |
| password.length >= 8 && | |
| password.length <= 20 && | |
| password === repassword && | |
| isAudioRecorded | |
| ) { | |
| submitButton.classList.remove("disabled"); | |
| submitButton.disabled = false; | |
| } else { | |
| submitButton.classList.add("disabled"); | |
| submitButton.disabled = true; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |