Используйте JavaScript для преобразования устной речи в письменный текст посредством распознавания речи.✨

Этот код создает базовую веб-страницу со значком микрофона и кнопкой. При нажатии на значок микрофона или кнопку вызывается функция распознавания речи браузера, и на странице отображается распознанный речевой текст.

<html>
<head>
    <title>Speech to Text</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            padding: 0;
     
        }

        #container {
            background-color: rgba(235, 12, 12, 0.8);
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        #p1 {
            font-size: 18px;
            margin-bottom: 20px;
        }

        #speaker-icon {
            width: 60px;
            height: 60px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        #speaker-icon:hover {
            transform: scale(1.1);
        }

        button {
            background-color:brown;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s;
        }

        button:hover {
            background-color: black;
        }
    </style>
</head>
<script>
    function startSpeechRecognition() {
        var SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
        var recognition = new SpeechRecognition();
        
        recognition.onstart = function() {
            console.log('Speech recognition started...');
        };

        recognition.onresult = function(event) {
            var transcript = event.results[0][0].transcript;
    
            document.getElementById('p1').innerHTML = transcript;
           
        };

        recognition.start();
    }
</script>

<body>
 
    <div id="container">
        <img id="speaker-icon" src="mic.png" alt="Microphone Icon" onclick="startSpeechRecognition()">
        <p id='p1'></p>
        <button onclick='startSpeechRecognition()'>Start Speaking</button>
    </div>

</body>
</html>
  • Элемент <html> включает в себя все содержимое HTML.
  • <title> обозначает название веб-страницы.
  • Раздел <head> содержит метаданные и ссылки на внешние ресурсы, такие как стили и скрипты.
  • Элемент <style> определяет правила CSS для стилизации элементов на странице.
  • Элемент <script> содержит код JavaScript для обработки распознавания речи.
  • Элемент <body> содержит видимое содержимое веб-страницы.

HTML-содержимое (тело):

  • Содержимое элемента <div> с идентификатором container образует центральную часть веб-страницы.
  • Элемент изображения с идентификатором speaker-icon отображает значок микрофона. Он кликабельный, и при нажатии он запускает функцию startSpeechRecognition.
  • Элемент абзаца с идентификатором p1 изначально пуст и будет использоваться для отображения распознанного речевого текста.
  • На кнопке имеется текст «Начать говорить». Нажатие этой кнопки также запускает функцию startSpeechRecognition.

Стилизация (CSS):

  • body создан с использованием шрифта Arial, центрирует содержимое как по горизонтали, так и по вертикали и занимает всю высоту области просмотра (100vh).
  • Стиль #container определяет внешний вид основного контейнера содержимого, который имеет красный фон с некоторой прозрачностью (rgba), закругленными углами, отступами и тенью блока для создания эффекта карточки.
  • Стиль #p1 задает размер шрифта и поля для элемента абзаца, в котором будет отображаться распознанный речевой текст.
  • Стиль #speaker-icon задает размер значка микрофона и добавляет эффект наведения для увеличения значка при наведении.
  • Стили button определяют внешний вид кнопки «Начать говорить» и эффект наведения, изменяющий цвет фона.

javascript(скрипт):

function startSpeechRecognition() :

Объявляет функцию с именем startSpeechRecognition, которая будет запускаться, когда пользователь щелкнет значок микрофона или кнопку «Начать говорить».

var SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition :

  • Объявляет переменную с именем SpeechRecognition.
  • Проверяет, поддерживает ли браузер API веб-речи, ища объект webkitSpeechRecognition или SpeechRecognition в глобальном объекте window.
  • Назначает соответствующий объект переменной SpeechRecognition в зависимости от поддержки браузера.

var recognition = new SpeechRecognition() :

  • Объявляет переменную с именем recognition.
  • Создает новый экземпляр объекта SpeechRecognition и присваивает его переменной recognition.

recognition.onstart = function() :

  • Определяет обработчик события onstart объекта recognition.
  • Это событие срабатывает при запуске процесса распознавания речи.

console.log('Speech recognition started...'): в консоли выводится сообщение о том, что распознавание речи началось, когда мы нажимаем кнопку или значок микрофона.

recognition.onresult = function(event)

  • Определяет обработчик события onresult объекта recognition.
  • Это событие срабатывает при распознавании речи.
  • Объект event представляет собой произошедшее событие, в данном случае событие распознавания речи, дающее результат. Свойство results объекта event содержит массив результатов распознавания, где каждый результат представляет собой возможную интерпретацию распознанной речи. Эти интерпретации называются «альтернативами».
  • event.results: осуществляется доступ к массиву результатов распознавания, полученному в процессе распознавания речи.event.results[0][0].transcript извлекается распознанный текст (расшифровка) первой альтернативы из первого результата, полученного в процессе распознавания речи.

document.getElementById('p1').innerHTML = transcript:Обновляет содержимое HTML-элемента с идентификатором 'p1' для отображения распознанной расшифровки.

recognition.start(): Инициирует процесс распознавания речи, используя метод start() объекта recognition.