Веб-приложение: распознавание речи в текст через Yandex SpeechKit
Техническое задание: веб-приложение для распознавания речи в текст через Yandex SpeechKit
📌 Описание задачи
Здравствуйте.
Необходимо разработать простое веб-приложение, в котором пользователь может нажать на кнопку, записать голос с микрофона (в том числе с мобильного телефона), а затем получить распознанный текст. Распознавание должно происходить через облачный сервис Yandex SpeechKit.
🔧 Функциональные требования
Фронтенд (React + Next.js):
Одна страница.
Кнопка “Начать запись”, “Остановить запись”.
После записи — отправка аудио на бэкенд.
Отображение результата распознавания на экране.
Бэкенд (Node.js + Express):
Принимает аудиофайл от клиента.
Отправляет его в Yandex SpeechKit API.
Возвращает клиенту распознанный текст.
Использует переменные IAM_TOKEN и FOLDER_ID (через .env).
Поддержка с мобильных устройств.
Приложение должно работать с браузеров телефонов.
Запись должна работать с мобильного микрофона.
⚙️ Технические детали
Формат аудио: WAV или PCM, 16 или 48 kHz, mono
Язык распознавания: ru-RU
Режим: однократная запись (не потоковая)
📂 Структура проекта
/
├── frontend (Next.js)
│ └── pages/index.js
└── backend (Node.js)
└── index.js
└── .env
💻 Фронтенд —
pages/index.js
npm install react-media-recorder axios
import { ReactMediaRecorder } from "react-media-recorder";
import axios from "axios";
export default function Home() {
const sendAudioToBackend = async (blob) => {
const formData = new FormData();
formData.append("audio", blob, "audio.wav");
const response = await axios.post("http://localhost:5000/recognize", formData, {
headers: { "Content-Type": "multipart/form-data" },
});
alert("Результат: " + response.data.result);
};
return (
<div style={{ textAlign: "center", marginTop: 100 }}>
<h2>🎤 Распознавание речи</h2>
<ReactMediaRecorder
audio
render={({ startRecording, stopRecording, mediaBlobUrl }) => (
<>
<button onClick={startRecording}>🎙 Начать запись</button>
<button onClick={() => stopRecording()}>🛑 Остановить</button>
{mediaBlobUrl && (
<audio
src={mediaBlobUrl}
controls
onEnded={() => {
fetch(mediaBlobUrl)
.then((res) => res.blob())
.then(sendAudioToBackend);
}}
/>
)}
</>
)}
/>
</div>
);
}
💾 Бэкенд —
index.js
npm init -y
npm install express multer axios cors dotenv
const express = require("express");
const multer = require("multer");
const cors = require("cors");
const axios = require("axios");
require("dotenv").config();
const app = express();
const upload = multer();
app.use(cors());
app.post("/recognize", upload.single("audio"), async (req, res) => {
try {
const response = await axios.post(
"https://stt.api.cloud.yandex.net/speech/v1/stt:recognize",
req.file.buffer,
{
headers: {
Authorization: `Bearer ${process.env.IAM_TOKEN}`,
"Content-Type": "application/octet-stream",
},
params: {
folderId: process.env.FOLDER_ID,
lang: "ru-RU",
format: "lpcm",
sampleRateHertz: 48000,
},
}
);
res.json({ result: response.data.result });
} catch (error) {
console.error(error.response?.data || error.message);
res.status(500).json({ error: "Ошибка распознавания" });
}
});
app.listen(5000, () => console.log("Бэкенд запущен на http://localhost:5000"));
🔐
.env
IAM_TOKEN=ваш_IAM_токен
FOLDER_ID=ваш_folder_id
✅ Что от вас требуется:
Сделать полностью рабочий фронт и бэк (с учётом CORS и .env)
Убедиться, что работает с телефонов
Сделать простый чистый UI с кнопками
Выдать исходный код + инструкцию запуска (README.md)
📦 Как будет использоваться:
Прототип для внутреннего использования и будущей мобильной версии (на Flutter).
Заявки фрилансеров
