Голосовые заметки в браузере на JavaScript: Web Speech API

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

Запись звука и распознавание речи часто смешивают, хотя API микрофона, распознаватель, разрешения и хранение текста имеют разные состояния. Поэтому отделим настройку, входные данные, основное действие и проверку. В этой статье вы соберёте страницу с кнопками старта и остановки, живым черновиком, финальным текстом и локальным сохранением заметок. Проверка: после разрешения микрофона речь появляется в черновике, финальная фраза добавляется в список, отказ в доступе показывает понятное сообщение.

Как устроен учебный проект голосовые заметки

Кнопка запускает SpeechRecognition, события result обновляют interim и final transcript, а localStorage хранит только подтверждённые строки. Держите ввод, логику и отображение раздельно: тогда каждый этап можно проверить отдельно.

Контрольные точки: поддержка, разрешение, результат и хранение. Следующий шаг начинается после совпадения с ожидаемым результатом.

От входных данных до видимого результата. Сначала проверяется вход, затем действие и только потом интерфейс.

Собираем рабочий пример шаг за шагом

Пример сверялся с актуальной документацией MDN Web Speech API на 19 октября 2026 года. Создайте HTML, CSS и app.js, запустите их через localhost или HTTPS. Для доступа к микрофону нужен безопасный контекст и разрешение пользователя. Проверьте текущую папку через pwd или Get-Location. Вставьте пример целиком, выполните один раз, затем разбирайте по частям.

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
const status = document.querySelector('#status')
const draft = document.querySelector('#draft')
const notes = document.querySelector('#notes')

if (!SpeechRecognition) {
  status.textContent = 'Распознавание речи не поддерживается. Используйте текстовое поле.'
} else {
  const recognition = new SpeechRecognition()
  recognition.lang = 'ru-RU'
  recognition.interimResults = true
  recognition.continuous = false

  recognition.addEventListener('result', (event) => {
    let interim = ''
    for (let i = event.resultIndex; i < event.results.length; i++) {
      const text = event.results[i][0].transcript.trim()
      if (event.results[i].isFinal) addNote(text)
      else interim += text + ' '
    }
    draft.textContent = interim
  })

  recognition.addEventListener('error', (event) => {
    status.textContent = 'Не удалось распознать речь: ' + event.error
  })

  document.querySelector('#start').addEventListener('click', () => recognition.start())
  document.querySelector('#stop').addEventListener('click', () => recognition.stop())
}

function addNote(text) {
  if (!text) return
  const item = document.createElement('li')
  item.textContent = text
  notes.append(item)
}

Флаг isFinal отделяет меняющийся черновик от фразы, которую уже можно сохранить. Найдите в примере вход, проверку и место формирования результата.

Что отличает устойчивый проект от случайного запуска. Явные границы делают ошибку локальной и понятной.

Что происходит внутри и почему это работает

Web Speech API описывает интерфейс распознавания, но реализация зависит от браузера. В некоторых браузерах аудио может отправляться в удалённый сервис, поэтому офлайн-работу и приватность нельзя обещать без проверки конкретной реализации. Логику держите отдельно от вывода: функция получает аргумент и возвращает значение, а интерфейс показывает его. Свойство lang влияет на модель распознавания. Язык интерфейса страницы не заменяет явную настройку ru-RU.

Не вызывайте start повторно, пока предыдущая сессия не завершилась: браузер может выбросить InvalidStateError. Отключайте кнопку старта на период прослушивания и возвращайте её в событии end. Для длинной диктовки продумайте сегменты и явный индикатор, что микрофон активен. Не прячьте поток в одном обработчике: сохраните вход, проверьте его, вызовите операцию и только затем обновите интерфейс.

Проверяем проект и добавляем свою функцию

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

Голосовой ввод полезен как альтернативный путь, но обычное текстовое поле остаётся обязательным fallback. Полезная правка проходит от нового ввода до видимого результата.

Четыре проверки перед следующим шагом. Каждый следующий этап начинается после наблюдаемого результата.

Что запомнить и куда двигаться дальше

Перед реальным использованием объясните, когда включён микрофон, где обрабатывается аудио и что именно сохраняется. Не храните исходную запись, если продукту нужен только текст. Для закрепления откройте в Telegram-боте голос в текст, в todo list на JavaScript и в PWA с локальным хранением.

Как изучить тему в Кодике

Повторите события, DOM и массивы, затем разберите разрешения и асинхронный жизненный цикл распознавания. Сначала восстановите главную функцию и проверьте её на трёх значениях.

Протестируйте обычную речь, паузу, отказ в доступе и неподдерживаемый браузер как четыре разные ветки. Базовый синтаксис закрепите через курс JavaScript.

Что получится в итоге

Так выглядит законченный учебный проект: есть понятный вход, видимый результат, защита от неверных данных и место для следующего улучшения.