Запись и распознавание аудио в браузере с помощью JavaScript
Запись аудио в браузере и его последующее распознавание — это задачи, которые можно решить с помощью современных веб-технологий. В этой статье мы рассмотрим, как записать аудио с помощью JavaScript и отправить его на внешний сервис для распознавания речи.
Основные этапы реализации
Запись аудио с помощью WebRTC: - Используем WebRTC API (MediaDevices и MediaRecorder) для захвата аудио из микрофона.
Отправка аудио на сервер: - Передаем записанный файл в API внешнего сервиса для распознавания речи (например, Google Cloud Speech-to-Text или Azure Speech).
Получение результата: - Получаем текстовый результат от сервиса и отображаем его на странице.
Шаг 1: Запись аудио
Мы начнем с создания функции, которая запрашивает доступ к микрофону пользователя и записывает аудио.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Запись и распознавание аудио</title>
</head>
<body>
<h1>Запись и распознавание аудио</h1>
<button id="start-btn">Начать запись</button>
<button id="stop-btn" disabled>Остановить запись</button>
<p>Распознанный текст: <span id="transcription">...</span></p>
<script src="app.js"></script>
</body>
</html>
JavaScript: Запись аудио
let mediaRecorder;
let audioChunks = [];
const startButton = document.getElementById('start-btn');
const stopButton = document.getElementById('stop-btn');
const transcriptionField = document.getElementById('transcription');
// Запрос доступа к микрофону и настройка MediaRecorder
startButton.addEventListener('click', async () => {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => {
audioChunks.push(event.data);
};
mediaRecorder.onstop = () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
audioChunks = [];
sendAudioToServer(audioBlob);
};
mediaRecorder.start();
startButton.disabled = true;
stopButton.disabled = false;
});
// Остановка записи
stopButton.addEventListener('click', () => {
mediaRecorder.stop();
startButton.disabled = false;
stopButton.disabled = true;
});
Шаг 2: Отправка аудио на внешний сервис
Записанное аудио нужно отправить на сервер для обработки. В этом примере мы используем Fetch API для отправки аудиофайла в формате WebM на внешний API.
Пример отправки аудио
async function sendAudioToServer(audioBlob) {
const formData = new FormData();
formData.append('audio', audioBlob);
try {
const response = await fetch('https://example.com/api/speech-to-text', {
method: 'POST',
body: formData,
});
if (response.ok) {
const result = await response.json();
transcriptionField.textContent = result.transcription || 'Нет текста';
} else {
transcriptionField.textContent = 'Ошибка распознавания';
}
} catch (error) {
console.error('Ошибка при отправке аудио:', error);
transcriptionField.textContent = 'Ошибка при соединении с сервером';
}
}
Шаг 3: Настройка внешнего API
Для обработки аудио потребуется внешний сервис. Вот несколько популярных вариантов:
Google Cloud Speech-to-Text: - Поддерживает множество языков. - Требуется создать проект в Google Cloud Console. - Отправляем аудио в формате FLAC или LINEAR16.
Azure Speech Service: - Удобен для интеграции с другими сервисами Microsoft. - Требуется ключ API и настройка на Azure Portal.
IBM Watson Speech to Text: - Бесплатный тариф с ограничением на количество запросов. - Поддерживает WebSocket для потоковой обработки.
Deepgram: - Простая настройка и поддержка WebM.
Пример настроек для Google Cloud Speech-to-Text
На стороне сервера вы преобразуете полученное аудио в подходящий формат и отправляете его в Google API:
from google.cloud import speech
import io
def transcribe_audio(audio_file):
client = speech.SpeechClient()
with io.open(audio_file, "rb") as f:
content = f.read()
audio = speech.RecognitionAudio(content=content)
config = speech.RecognitionConfig(
encoding=speech.RecognitionConfig.AudioEncoding.WEBM_OPUS,
sample_rate_hertz=48000,
language_code="ru-RU",
)
response = client.recognize(config=config, audio=audio)
return response.results[0].alternatives[0].transcript if response.results else "Нет текста"
Результат
После выполнения всех шагов пользователь может: 1. Запустить запись аудио. 2. Остановить запись. 3. Увидеть распознанный текст на экране.
Примечания и ограничения
- Формат аудио:
-
Убедитесь, что формат записанного аудио совместим с API. Например, Google Cloud требует FLAC или LINEAR16.
-
Ограничения браузера:
-
Некоторые функции (например, доступ к микрофону) требуют HTTPS.
-
Скорость распознавания:
-
Зависят от скорости интернета и времени обработки API.
-
Конфиденциальность:
- Убедитесь, что пользователи знают, как их данные обрабатываются и хранятся.
JavaScript предоставляет удобные инструменты для записи аудио в браузере, а интеграция с внешними сервисами позволяет легко добавить функцию распознавания речи. Это мощный способ улучшить пользовательский опыт и автоматизировать задачи, связанные с обработкой аудио.
-
Создано 26.11.2024 08:46:18
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.