Веб-приложение: распознавание речи в текст через Yandex SpeechKit

Техническое задание: веб-приложение для распознавания речи в текст через Yandex SpeechKit

📌 Описание задачи

Здравствуйте.

Необходимо разработать простое веб-приложение, в котором пользователь может нажать на кнопку, записать голос с микрофона (в том числе с мобильного телефона), а затем получить распознанный текст. Распознавание должно происходить через облачный сервис Yandex SpeechKit.

🔧 Функциональные требования

1. Фронтенд (React + Next.js):
   

   • Одна страница.

   • Кнопка “Начать запись”, “Остановить запись”.

   • После записи — отправка аудио на бэкенд.

   • Отображение результата распознавания на экране.

3. Бэкенд (Node.js + Express):
   

   • Принимает аудиофайл от клиента.

   • Отправляет его в Yandex SpeechKit API.

   • Возвращает клиенту распознанный текст.

   • Использует переменные IAM_TOKEN и FOLDER_ID (через .env).

5. Поддержка с мобильных устройств.
   

   • Приложение должно работать с браузеров телефонов.

   • Запись должна работать с мобильного микрофона.

⚙️ Технические детали

Формат аудио: 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).