Главная → Блог → Как записать голос в браузере и превратить его в текст

Как записать голос в браузере и превратить его в текст

Опубликовано 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 прямо из браузера?

Технически да, но тогда ключ доступен любому посетителю страницы. Всегда ставьте прослойку на своём сервере.

Нужно ли конвертировать webm?

Нет, формат принимается напрямую. Достаточно передать файл с корректным именем и расширением.

Как показать текст по мере речи?

Потоковой выдачи нет: текст возвращается целиком после обработки. Для ощущения скорости режьте запись на короткие фрагменты и отправляйте их по очереди.

Что с ограничением длины?

Ограничение — 25 МБ на файл. Для голосового ввода это не проблема: в webm это часы речи.