Mohammad Zwaib
118 lines
4.7 KiB
HTML
118 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>HOEMMA – Interview aufnehmen</title>
|
||
<style>
|
||
body { font-family: sans-serif; max-width: 640px; margin: 40px auto; padding: 0 16px; }
|
||
button { font-size: 1.1rem; padding: 12px 24px; border-radius: 8px; border: none; cursor: pointer; }
|
||
#recordBtn { background: #c0392b; color: white; }
|
||
#recordBtn.recording { background: #27ae60; }
|
||
#status { margin: 16px 0; color: #555; }
|
||
#transcript { width: 100%; min-height: 200px; font-size: 1rem; padding: 12px; margin-top: 8px; box-sizing: border-box; }
|
||
.meta input { width: 100%; font-size: 1rem; padding: 10px; margin-top: 4px; box-sizing: border-box; }
|
||
.meta label { display: block; margin-top: 12px; color: #333; }
|
||
#saveBtn { background: #2980b9; color: white; margin-top: 12px; display: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>🎙 Interview aufnehmen</h1>
|
||
|
||
<button id="recordBtn">🔴 Aufnahme starten</button>
|
||
<div id="status">Bereit.</div>
|
||
|
||
<div class="meta">
|
||
<label for="interviewer">Name der interviewten Person</label>
|
||
<input id="interviewer" type="text" placeholder="z. B. Frau Meier">
|
||
|
||
<label for="city">Stadt</label>
|
||
<input id="city" type="text" value="Dortmund">
|
||
</div>
|
||
|
||
<textarea id="transcript" placeholder="Hier erscheint der Text nach der Aufnahme…"></textarea>
|
||
<button id="saveBtn">💾 Speichern</button>
|
||
|
||
<script>
|
||
let mediaRecorder = null;
|
||
let chunks = [];
|
||
|
||
const recordBtn = document.getElementById("recordBtn");
|
||
const status = document.getElementById("status");
|
||
const transcript = document.getElementById("transcript");
|
||
const saveBtn = document.getElementById("saveBtn");
|
||
|
||
recordBtn.addEventListener("click", async () => {
|
||
|
||
// ---- Fall 1: Aufnahme läuft -> stoppen ----
|
||
if (mediaRecorder && mediaRecorder.state === "recording") {
|
||
mediaRecorder.stop();
|
||
return;
|
||
}
|
||
|
||
// ---- Fall 2: neue Aufnahme starten ----
|
||
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||
mediaRecorder = new MediaRecorder(stream, { mimeType: "audio/webm" });
|
||
chunks = [];
|
||
|
||
mediaRecorder.ondataavailable = e => chunks.push(e.data);
|
||
|
||
mediaRecorder.onstop = async () => {
|
||
recordBtn.textContent = "🔴 Aufnahme starten";
|
||
recordBtn.classList.remove("recording");
|
||
status.textContent = "⏳ Transkription läuft…";
|
||
|
||
const audioBlob = new Blob(chunks, { type: "audio/webm" });
|
||
const formData = new FormData();
|
||
formData.append("file", audioBlob, "aufnahme.webm");
|
||
|
||
try {
|
||
const response = await fetch("/interview/transcription", { method: "POST", body: formData });
|
||
if (!response.ok) throw new Error("Server: " + response.status);
|
||
|
||
transcript.value = await response.text();
|
||
status.textContent = "✅ Fertig – Text bitte prüfen und ggf. korrigieren.";
|
||
saveBtn.style.display = "inline-block";
|
||
} catch (err) {
|
||
status.textContent = "❌ Fehler: " + err.message;
|
||
}
|
||
|
||
stream.getTracks().forEach(t => t.stop()); // Mikrofon freigeben
|
||
};
|
||
|
||
mediaRecorder.start();
|
||
recordBtn.textContent = "⏹ Aufnahme beenden";
|
||
recordBtn.classList.add("recording");
|
||
status.textContent = "🎙 Aufnahme läuft – sprechen Sie…";
|
||
});
|
||
|
||
saveBtn.addEventListener("click", async () => {
|
||
|
||
status.textContent = "⏳ Speichern läuft…";
|
||
|
||
try {
|
||
const response = await fetch("/interview/save", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
interviewr: document.getElementById("interviewer").value,
|
||
interviewTranscript: transcript.value,
|
||
city: document.getElementById("city").value
|
||
})
|
||
});
|
||
|
||
const antwort = await response.json(); // ApiResponse: {success, errorMessage, data}
|
||
|
||
status.textContent = antwort.success
|
||
? "✅ In der Wissensdatenbank gespeichert! (" + antwort.data.link + ")"
|
||
: "❌ " + antwort.errorMessage;
|
||
|
||
} catch (err) {
|
||
status.textContent = "❌ Fehler: " + err.message;
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|