Введение:
В современном технически подкованном мире возможность преобразовывать устную речь в письменный текст стала важной функцией для многих приложений. В этом руководстве мы рассмотрим процесс создания простого приложения для преобразования голоса в текст с использованием 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