app.js

const TOKEN_URL = “https://scribe-token.aaron-transcribe.workers.dev/”;

function log(msg) {
document.getElementById(“status”).textContent = msg;
}

log(“app-js loaded. Tap Start.”);

let connection;

document.getElementById(“start”).addEventListener(“click”, async function () {
log(“Start tapped.”);
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
log(“Microphone allowed.”);
stream.getTracks().forEach(function (t) { t.stop(); });

log(“Fetching token…”);
const res = await fetch(TOKEN_URL);
const raw = await res.text();
log(“Token HTTP ” + res.status + “\n” + raw.slice(0, 300));
if (!res.ok) throw new Error(“Token request failed”);

const data = JSON.parse(raw);
if (!data.token) throw new Error(“No token field in response”);

log(“Loading ElevenLabs client…”);
const mod = await import(“https://esm.sh/@elevenlabs/client”);
connection = mod.Scribe.connect({
token: data.token,
modelId: “scribe_v2_realtime”,
microphone: {
echoCancellation: true,
noiseSuppression: true,
autoGainControl: true
}
});

connection.on(mod.RealtimeEvents.OPEN, function () {
log(“WebSocket open. Speak.”);
});
connection.on(mod.RealtimeEvents.PARTIAL_TRANSCRIPT, function (d) {
document.getElementById(“live”).textContent = (d && d.text) || “”;
});
connection.on(mod.RealtimeEvents.COMMITTED_TRANSCRIPT, function (d) {
document.getElementById(“live”).textContent = “”;
document.getElementById(“final”).textContent += ((d && d.text) || “”) + ” “;
});
connection.on(mod.RealtimeEvents.ERROR, function (e) {
log(“Scribe error: ” + JSON.stringify(e));
});
} catch (err) {
log(String(err && err.stack ? err.stack : err));
}
});

document.getElementById(“stop”).addEventListener(“click”, function () {
try { connection && connection.close(); } catch (e) {}
log(“Stopped.”);
});