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; | |
| } | |
| .tc { | |
| text-align: center; | |
| } | |
| </style> | |
| <title>ユーザー登録画面</title> | |
| <link | |
| href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" | |
| rel="stylesheet" | |
| /> | |
| </head> | |
| <body> | |
| <h1>ようこそ, {{ user.name }} さん!</h1> | |
| <form method="POST"> | |
| <div class="container"> | |
| <h2>音声登録</h2> | |
| <div class="flex"> | |
| <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" class="tc"></p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <button | |
| class="history-button disabled" | |
| id="detailButton submit" | |
| onclick="showRecorder()" | |
| > | |
| 音声登録完了 | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| <script> | |
| let mediaRecorder; | |
| let audioChunks = []; | |
| let countdownTimer; | |
| let isAudioRecorded = false; | |
| sessionStorage.setItem("userName", "{{ user.name }}"); | |
| async function toggleRecording() { | |
| const recordButton = document.getElementById("recordButton"); | |
| const countdownDisplay = document.getElementById("countdownDisplay"); | |
| recordButton.disabled = true; // ボタンを無効化（連打防止） | |
| countdownDisplay.textContent = "録音中…"; // 初期表示 | |
| isAudioRecorded = false; | |
| 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; | |
| validateForm(); | |
| }; | |
| mediaRecorder.start(); | |
| startCountdown(10, countdownDisplay); | |
| setTimeout(() => { | |
| if (mediaRecorder.state === "recording") { | |
| mediaRecorder.stop(); | |
| } | |
| }, 10000); | |
| } catch (error) { | |
| console.error("マイクのアクセスに失敗しました:", error); | |
| recordButton.disabled = false; | |
| countdownDisplay.textContent = ""; | |
| } | |
| } | |
| 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 userName = sessionStorage.getItem("userName"); // ユーザー名を取得 | |
| if (!userName) { | |
| alert("ユーザー名が取得できません。ログインしてください。"); | |
| return; | |
| } | |
| 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, | |
| user_name: userName, | |
| }), | |
| }) | |
| .then((response) => response.json()) | |
| .then((data) => { | |
| if (data.success) { | |
| alert("音声がサーバーに送信されました。"); | |
| isAudioRecorded = true; | |
| validateForm(); | |
| } else { | |
| alert("音声の送信に失敗しました。"); | |
| } | |
| }) | |
| .catch((error) => { | |
| console.error("送信エラー:", error); | |
| alert("音声の送信中にエラーが発生しました。"); | |
| }); | |
| }; | |
| reader.readAsDataURL(audioBlob); | |
| } | |
| // ユーザー名をセッションに保存（ログイン後に実行） | |
| function setUserName(userName) { | |
| sessionStorage.setItem("userName", userName); | |
| } | |
| // 初期化処理 | |
| displayTranscription(); | |
| //画面遷移 | |
| function showRecorder() { | |
| // 録音画面へ遷移 | |
| window.location.href = "/index"; | |
| } | |
| </script> | |
| </body> | |
| </html> | |