Введение:

В современном технически подкованном мире возможность преобразовывать устную речь в письменный текст стала важной функцией для многих приложений. В этом руководстве мы рассмотрим процесс создания простого приложения для преобразования голоса в текст с использованием HTML и JavaScript. К концу этого руководства у вас будет функциональное приложение, которое позволит пользователям говорить в свои устройства и видеть, как их речь преобразуется в текст в режиме реального времени.

Шаг 1. Настройка структуры HTML

Мы начнем с создания базовой структуры HTML для нашего приложения. Откройте ваш любимый текстовый редактор и создайте новый файл HTML. Назовем его index.html.

<!DOCTYPE html>
<html>
<head>
    <title>Voice to Text</title>
</head>
<body>
    <button id="startButton">Start Voice Input</button>
    <div id="output"></div>

    <script>
        // JavaScript code will go here
    </script>
</body>
</html>

В этой исходной структуре у нас есть кнопка с идентификатором startButton и кнопка div с идентификатором output, где мы будем отображать расшифрованный текст.

Шаг 2. Добавление JavaScript для распознавания голоса

Внутри тега <script> мы напишем код JavaScript, отвечающий за обработку распознавания голоса. Этот код будет использовать API Web Speech для включения преобразования голоса в текст.

const startButton = document.getElementById('startButton');
const outputDiv = document.getElementById('output');

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition || window.mozSpeechRecognition || window.msSpeechRecognition)();
recognition.lang = 'en-US';

recognition.onstart = () => {
    startButton.textContent = 'Listening...';
};

recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    outputDiv.textContent = transcript;
};

recognition.onend = () => {
    startButton.textContent = 'Start Voice Input';
};

startButton.addEventListener('click', () => {
    recognition.start();
});

В этом разделе кода:

  • Мы извлекаем элементы startButton и outputDiv из HTML.
  • Мы создаем новый экземпляр объекта SpeechRecognition и устанавливаем для него язык «en-US».
  • Когда начинается распознавание (onstart), мы обновляем текст кнопки, чтобы показать, что мы слушаем.
  • Событие onresult запускается, когда процесс распознавания дает результат. Мы извлекаем расшифрованный текст и отображаем его в файле outputDiv.
  • Когда распознавание заканчивается (onend), мы сбрасываем текст кнопки на «Начать голосовой ввод».
  • Наконец, мы добавляем к кнопке прослушиватель событий щелчка, который запускает процесс распознавания при нажатии.

Шаг 3. Тестирование приложения

Теперь, когда у нас есть HTML и JavaScript, пришло время протестировать приложение. Откройте файл index.html в веб-браузере. Вы должны увидеть кнопку с надписью «Начать голосовой ввод».

Нажмите кнопку, и появится диалоговое окно браузера с запросом разрешений для микрофона. Разрешите доступ к вашему микрофону.

Как только доступ будет предоставлен, говорите в микрофон. Вы заметите, что расшифрованный текст появляется в области вывода в режиме реального времени.

Заключение

Поздравляем! Вы успешно создали простое приложение для преобразования голоса в текст с использованием HTML и JavaScript. Это приложение предоставляет пользователям возможность говорить в микрофон своего устройства и видеть, как их речь мгновенно преобразуется в письменный текст. Этот пример демонстрирует мощь API Web Speech и то, как его можно использовать для создания инновационных приложений, которые устраняют разрыв между устным и письменным общением.

Не стесняйтесь расширять этот проект, добавляя такие функции, как обработка ошибок, дополнительные языки или интеграция расшифрованного текста с другими приложениями. Этот учебник служит отправной точкой для изучения мира распознавания голоса и его потенциальных приложений.

Если вам понравилась эта статья, пожалуйста, хлопните в ладоши, чтобы она дошла до большего числа людей. Вы можете подписаться на меня в Gopeshkhandelwal, найти меня в LinkedIn или посмотреть мои работы на GitHub