Используйте 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
.