首页 → 博客 → 如何在浏览器里录音并转成文字

如何在浏览器里录音并转成文字

发布于 2026-08-20 · 5 分钟阅读

打字慢的地方，语音输入就有价值：手机上提工单、在输入框里写评论、口述一段长描述。浏览器用内置接口就能录音，转录再加一次请求——但请求要从你的服务器发，而不是页面。

在浏览器里录音

内置的 MediaRecorder 不需要任何库就能产出文件：

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const rec = new MediaRecorder(stream, { mimeType: "audio/webm" });
const chunks = [];

rec.ondataavailable = e => chunks.push(e.data);
rec.onstop = async () => {
  const blob = new Blob(chunks, { type: "audio/webm" });
  const form = new FormData();
  form.append("file", blob, "voice.webm");
  const r = await fetch("/api/transcribe", { method: "POST", body: form });
  document.querySelector("#out").value = (await r.json()).text;
};

rec.start();
setTimeout(() => rec.stop(), 15000);

webm 可以直接收，不需要转换。

密钥为什么不能放在浏览器里

直接从页面上传很诱人，但那样密钥就写在谁都能看的源码里。一小时内会被人找到，一天内余额就没了。

正确的形状是自己服务器上的一层薄代理：浏览器把文件传给你，你校验用户和额度，再由服务器带着密钥去调 API。

服务端代理

import express from "express";
import multer from "multer";
import OpenAI from "openai";
import { toFile } from "openai/uploads";

const upload = multer({ limits: { fileSize: 25 * 1024 * 1024 } });
const client = new OpenAI({ baseURL: "https://voicesscribe.com/v1", apiKey: process.env.VS_KEY });

express()
  .post("/api/transcribe", upload.single("file"), async (req, res) => {
    const file = await toFile(req.file.buffer, "voice.webm");
    const r = await client.audio.transcriptions.create({ model: "whisper-1", file });
    res.json({ text: r.text });
  })
  .listen(3000);

顺手在这里限制录音时长和单用户请求数，否则第一个找到表单的机器人就会把它变成你的账单。

浏览器的限制

只在 HTTPS 下。非加密连接拿不到麦克风权限，本地开发除外。
需要用户授权。录音只在用户同意后开始，所以要放在按钮点击里，而不是页面加载时。
容器不一。有的浏览器录成 webm，有的录成 mp4，两者都收，但文件名要按实际类型给。
后台会断。手机上切走标签页录音就停，长时间口述不可靠。

用你自己的录音试一试。 注册只需一分钟，免费额度足够判断识别质量。

免费获取 API 密钥

常见问题

能直接从浏览器调 API 吗？

技术上可以，但密钥会暴露给每个访客。始终在自己的服务器上加一层代理。

webm 需要转换吗？

不需要，直接收。只要上传时给一个带正确扩展名的文件名。

能边说边出字吗？

没有流式输出，文本在处理完后一次返回。想要即时感，就把录音切成短段依次发送。

长度限制是多少？

单个文件 25 MB，在 webm 下是好几个小时的语音，对语音输入不构成约束。