Início → Blog → Como gravar áudio no navegador e transformá-lo em texto

Como gravar áudio no navegador e transformá-lo em texto

A entrada por voz compensa onde digitar é lento: chamados pelo celular, comentários em um campo, ditar uma descrição longa. O navegador grava áudio com recursos nativos, e a transcrição é uma requisição a mais — feita do seu servidor, não da página.

Gravar no navegador

O MediaRecorder nativo entrega um arquivo pronto, sem bibliotecas:

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 é aceito diretamente, então não há nada a converter.

Por que a chave nunca fica no navegador

É tentador postar o arquivo direto da página, mas aí a chave fica no código que qualquer um lê. Em uma hora ela é encontrada; em um dia o saldo acabou.

A forma correta é uma camada fina no seu servidor: o navegador envia para você, você confere usuário e cota, e só o servidor fala com a API usando a chave.

A camada no servidor

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);

É aqui também que se limita a duração da gravação e o número de requisições por usuário — caso contrário, o primeiro robô que achar o formulário o transforma na sua despesa.

Limitações do navegador

• Só HTTPS. O acesso ao microfone não é concedido em conexão sem criptografia, exceto em localhost durante o desenvolvimento.
• Permissão explícita. A gravação começa apenas após o consentimento, então peça no clique de um botão, não no carregamento da página.
• Contêineres diferentes. Alguns navegadores gravam webm, outros mp4 — ambos são aceitos, mas o nome do arquivo deve refletir o tipo real.
• Aba em segundo plano. No celular a gravação para quando a aba sai de foco, então ditado longo não é confiável.

Perguntas frequentes

Leitura relacionada

• Voz para texto em Node.js: código pronto e as armadilhas de sempre — Como transcrever áudio a partir do Node.js: o SDK oficial, streams e FormData, uploads no Express, timeouts e novas tentativas — com código pronto para colar.
• Como transformar notas de voz em texto automaticamente — Transforme notas de voz do celular e do gravador numa base pesquisável: pasta sincronizada, script observador, modelo de nota e dicas para áudio de rua.
• Privacidade e segurança das transcrições: o que perguntar ao fornecedor — Cinco perguntas para um fornecedor de reconhecimento de fala: retenção, uso dos dados em treinamento, criptografia, acesso de funcionários e exclusão sob pedido.