Введение:

Вы когда-нибудь хотели, чтобы вы могли легко преобразовать произнесенные слова в письменный текст? Что ж, тебе повезло! В этой статье мы познакомим вас с процессом создания базового веб-приложения для преобразования голоса в текст с использованием JavaScript и API распознавания речи. Не беспокойтесь, если вы новичок в программировании — мы объясним каждый шаг в понятной для новичков манере. Давайте погрузимся и перенесем ваш голос в цифровой мир! 🚀

Шаг 1: Настройка структуры HTML 🏗️

Прежде всего, давайте настроим базовую структуру нашего веб-приложения. Создайте файл HTML и назовите его index.html. Внутри мы начнем с обычного шаблона HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Voice to Text</title>
</head>
<body>
    <!-- Rest of the code will go here -->
</body>
</html>

Шаг 2: Добавление элементов пользовательского интерфейса 🎤

Теперь давайте добавим необходимые элементы на нашу веб-страницу. Мы создадим кнопку, которую пользователи смогут щелкнуть, чтобы начать запись своего голоса, и div, чтобы отобразить расшифрованный текст. Добавьте следующий код внутрь тега <body>:

<button id="startButton">Start Voice Input</button>
<div id="output"></div>

Шаг 3: Магия JavaScript — заставить его работать 🪄

А вот и самое интересное — добавление кода JavaScript, который воплощает в жизнь нашу функциональность Voice-to-Text! Мы разобьем код на более мелкие части для простоты понимания:

Получение ссылок на элементы. Начнем с получения ссылок на ранее созданные HTML-элементы:

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...';
};

Когда у распознавания есть результат (транскрипт), мы отображаем его в выводе div:

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();
});

Заключение:

Поздравляем, вы только что создали собственное веб-приложение для преобразования голоса в текст с использованием JavaScript и API распознавания речи! 🎉 Теперь, когда вы посещаете свою веб-страницу, вы можете нажать кнопку «Начать голосовой ввод», говорить в микрофон и наблюдать, как ваши слова волшебным образом появляются на экране. Это руководство для начинающих охватывает все, от настройки структуры HTML до пошаговой реализации кода JavaScript.

Помните, что это только начало — вы можете улучшить это приложение, добавив такие функции, как обработка ошибок и стиль, чтобы сделать его по-настоящему вашим. Удачного кодирования и получайте удовольствие от экспериментов с миром веб-разработки! 💻🎙️