22a16affa5
Some checks failed
ci/woodpecker/push/deploy Pipeline failed
Browser records audio via MediaRecorder API, bcard proxies it to Whisper STT service and returns transcription as JSON. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
119 lines
4.7 KiB
HTML
119 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Transcribator</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
|
<style>
|
|
:root { --pico-font-size: 16px; }
|
|
html, body { height: 100dvh; margin: 0; overflow: hidden; }
|
|
body { display: flex; flex-direction: column; }
|
|
main { flex: 1; display: flex; flex-direction: column; max-width: 640px; width: 100%; margin: 0 auto; padding: 0.5rem; overflow: hidden; }
|
|
h1 { text-align: center; margin: 0.5rem 0; font-size: 1.4rem; }
|
|
#chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }
|
|
#chat:empty::before { content: "Tap the microphone to start recording"; display: block; text-align: center; opacity: 0.5; margin-top: 2rem; }
|
|
#chat article { margin: 0; padding: 0.75rem; }
|
|
#chat article audio { width: 100%; margin-bottom: 0.5rem; }
|
|
#chat article p { margin: 0; }
|
|
.input-area { padding: 0.5rem 0; display: flex; justify-content: center; }
|
|
#mic-btn {
|
|
width: 64px; height: 64px; border-radius: 50%; font-size: 1.8rem;
|
|
display: flex; align-items: center; justify-content: center;
|
|
cursor: pointer; border: none; padding: 0; min-height: 48px;
|
|
}
|
|
#mic-btn.recording { background: var(--pico-del-color); animation: pulse 1s infinite; }
|
|
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
|
|
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; vertical-align: middle; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.error { color: var(--pico-del-color); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<h1>Transcribator</h1>
|
|
<div id="chat"></div>
|
|
<div class="input-area">
|
|
<button id="mic-btn" aria-label="Record">🎤</button>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
const chat = document.getElementById('chat');
|
|
const micBtn = document.getElementById('mic-btn');
|
|
let mediaRecorder = null;
|
|
let chunks = [];
|
|
|
|
function getMimeType() {
|
|
if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) return 'audio/webm';
|
|
if (MediaRecorder.isTypeSupported('audio/mp4')) return 'audio/mp4';
|
|
return '';
|
|
}
|
|
|
|
function getExtension(mime) {
|
|
if (mime.includes('webm')) return 'webm';
|
|
if (mime.includes('mp4')) return 'm4a';
|
|
return 'bin';
|
|
}
|
|
|
|
function addMessage(audioBlob) {
|
|
const article = document.createElement('article');
|
|
const audio = document.createElement('audio');
|
|
audio.controls = true;
|
|
audio.src = URL.createObjectURL(audioBlob);
|
|
const text = document.createElement('p');
|
|
text.innerHTML = '<span class="spinner"></span> Transcribing...';
|
|
article.append(audio, text);
|
|
chat.append(article);
|
|
chat.scrollTop = chat.scrollHeight;
|
|
return text;
|
|
}
|
|
|
|
async function sendAudio(blob, textEl) {
|
|
const mime = blob.type || 'audio/webm';
|
|
const ext = getExtension(mime);
|
|
const form = new FormData();
|
|
form.append('audio', blob, `recording.${ext}`);
|
|
try {
|
|
const res = await fetch('/api/transcribe', { method: 'POST', body: form });
|
|
if (!res.ok) {
|
|
const err = await res.text();
|
|
textEl.innerHTML = `<span class="error">Error: ${err}</span>`;
|
|
return;
|
|
}
|
|
const data = await res.json();
|
|
textEl.textContent = data.text || '(empty)';
|
|
} catch (e) {
|
|
textEl.innerHTML = `<span class="error">Error: ${e.message}</span>`;
|
|
}
|
|
}
|
|
|
|
async function toggleRecording() {
|
|
if (mediaRecorder && mediaRecorder.state === 'recording') {
|
|
mediaRecorder.stop();
|
|
return;
|
|
}
|
|
try {
|
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
const mime = getMimeType();
|
|
mediaRecorder = new MediaRecorder(stream, mime ? { mimeType: mime } : {});
|
|
chunks = [];
|
|
mediaRecorder.ondataavailable = e => { if (e.data.size > 0) chunks.push(e.data); };
|
|
mediaRecorder.onstop = () => {
|
|
stream.getTracks().forEach(t => t.stop());
|
|
micBtn.classList.remove('recording');
|
|
const blob = new Blob(chunks, { type: mediaRecorder.mimeType });
|
|
const textEl = addMessage(blob);
|
|
sendAudio(blob, textEl);
|
|
};
|
|
mediaRecorder.start();
|
|
micBtn.classList.add('recording');
|
|
} catch (e) {
|
|
alert('Microphone access denied: ' + e.message);
|
|
}
|
|
}
|
|
|
|
micBtn.addEventListener('click', toggleRecording);
|
|
</script>
|
|
</body>
|
|
</html>
|