Теоретическая основа проекта собрана в главном концепте [«учиться-легко.рф — обучение чтению как дешифровке письменного кода»](/concepts/uchitsya-legko-rf-obuchenie-chteniyu-kak-deshifrovke-pismennogo-koda). Он является центральной точкой проекта: описывает общую модель, текущее состояние и связывает частные концепты.

Сейчас проект находится на стадии **Idea**. Сформирована базовая теория чтения как восстановления информации по письменному коду. Зафиксированы информационные сущности, на которых строится обучение: объект и ситуация, понятие, изображение, устное слово, звучание, написанное слово, буквы и более крупные структурные части слова.

Ключевые составляющие теории:

* [Чтение — это распознавание слова и восстановление смысла, а не последовательное озвучивание букв](/concepts/chtenie-eto-raspoznavanie-slova-i-vosstanovlenie-smysla).
* [Письменное слово связывает несколько представлений одного и того же содержания](/concepts/pismennoe-slovo-svyazyvaet-neskolko-predstavleniy).
* [Обучение чтению должно идти от известных опор к неизвестному коду](/concepts/obuchenie-chteniyu-ot-izvestnyh-opor-k-neizvestnomu-kodu).
* [Устный словарь — база распознавания при обучении чтению](/concepts/ustnyy-slovar-baza-raspoznavaniya-pri-obuchenii-chteniyu).
* [Длинное слово должно раскрываться через знакомые структурные части](/concepts/dlinnoe-slovo-cherez-znakomye-strukturnye-chasti).
* [Подсказки должны постепенно исчезать по мере освоения связей](/concepts/podskazki-dolzhny-postepenno-ischezat).

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

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

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

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

учиться-легко.рф

Собрать простую веб-версию MVP на основе [главного концепта проекта](/concepts/uchitsya-legko-rf-obuchenie-chteniyu-kak-deshifrovke-pismennogo-koda).

Прототип должен уметь:

- показывать изображения;
- воспроизводить записанное произношение;
- показывать написание слова и отдельные его элементы;
- принимать выбор ребёнка;
- переключать задания в зависимости от простого состояния освоения;
- скрывать отдельные подсказки;
- выдавать хотя бы одно контрольное новое слово для проверки переноса;
- записывать ответы и время/порядок попыток в достаточном объёме для последующего анализа.

Не нужны аккаунты, платежи, сложная CMS, большой дизайн-системный слой или полноценная игровая механика. Ценность MVP — работающий эксперимент, а не готовый продукт.

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

Собрать браузерный прототип минимального MVP

## Цель

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

## Основная гипотеза

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

Буквы, фонемы, слоги и слова могут использоваться как метаданные и названия примеров, но не должны определять архитектуру DSP-ядра.

## Что исследовать

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

## Подход

Использовать цикл:

`живая запись → измерение → анализ → сценарий параметров → синтез → повторное измерение → сравнение → корректировка`

Неудачные попытки также считать полезным результатом: они уточняют отображение между управляющими параметрами и наблюдаемым звуком.

## Ограничения направления

- не строить ядро вокруг каталога фонем, букв или слогов;
- не использовать генеративный TTS как механизм синтеза;
- сохранять детерминированность и явную управляемость параметрами;
- добавлять новые DSP-механизмы только как универсальные средства формирования звука, а не как специальные реализации конкретных букв.

## Ожидаемый результат

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

Исследовать параметрический синтез русских звуков и переходов между ними.

Исследовать параметрический синтез русских звуков и переходов между ними

## Цель

Добавить браузерную озвучку учебных единиц без отдельного TTS-бэкенда: букв, слогов и отдельных слов.

Основной сценарий:

1. Ребёнок видит букву, слог или слово.
2. Нажимает кнопку воспроизведения.
3. Браузер произносит соответствующий текст.

На первом этапе использовать встроенный Web Speech API браузера.

---

## Основное API

```ts
const utterance = new SpeechSynthesisUtterance('Собака')
utterance.lang = 'ru-RU'

window.speechSynthesis.speak(utterance)
```

Остановка текущей речи:

```ts
window.speechSynthesis.cancel()
```

Полезные параметры:

```ts
utterance.lang = 'ru-RU'
utterance.rate = 1
utterance.pitch = 1
utterance.volume = 1
```

- `lang` — язык/локаль синтеза;
- `rate` — скорость речи;
- `pitch` — высота голоса;
- `volume` — громкость 0..1;
- `voice` — конкретный системный голос.

---

## Выбор русского голоса

```ts
const voices = window.speechSynthesis.getVoices()

const russianVoice = voices.find(
  voice => voice.lang.toLowerCase().startsWith('ru'),
)

const utterance = new SpeechSynthesisUtterance('Рыба')
utterance.lang = 'ru-RU'
utterance.voice = russianVoice ?? null

window.speechSynthesis.speak(utterance)
```

Список голосов может загружаться асинхронно:

```ts
window.speechSynthesis.onvoiceschanged = () => {
  const voices = window.speechSynthesis.getVoices()
  console.log(voices)
}
```

---

## Базовый helper

```ts
export type SpeakOptions = {
  lang?: string
  rate?: number
  pitch?: number
  volume?: number
  voice?: SpeechSynthesisVoice | null
}

export const speak = (
  text: string,
  options: SpeakOptions = {},
) => {
  window.speechSynthesis.cancel()

  const utterance = new SpeechSynthesisUtterance(text)

  utterance.lang = options.lang ?? 'ru-RU'
  utterance.rate = options.rate ?? 1
  utterance.pitch = options.pitch ?? 1
  utterance.volume = options.volume ?? 1

  if (options.voice) {
    utterance.voice = options.voice
  }

  window.speechSynthesis.speak(utterance)

  return utterance
}
```

Примеры:

```ts
speak('А')
speak('МА')
speak('Собака')
```

---

## Рекомендуемый hook для React

```ts
import { useCallback, useEffect, useState } from 'react'

export const useSpeechSynthesis = () => {
  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([])

  useEffect(() => {
    const loadVoices = () => {
      setVoices(window.speechSynthesis.getVoices())
    }

    loadVoices()
    window.speechSynthesis.addEventListener('voiceschanged', loadVoices)

    return () => {
      window.speechSynthesis.removeEventListener('voiceschanged', loadVoices)
    }
  }, [])

  const speak = useCallback((text: string) => {
    window.speechSynthesis.cancel()

    const utterance = new SpeechSynthesisUtterance(text)
    utterance.lang = 'ru-RU'

    const russianVoice = voices.find(
      voice => voice.lang.toLowerCase().startsWith('ru'),
    )

    if (russianVoice) {
      utterance.voice = russianVoice
    }

    window.speechSynthesis.speak(utterance)
  }, [voices])

  const stop = useCallback(() => {
    window.speechSynthesis.cancel()
  }, [])

  return {
    voices,
    speak,
    stop,
  }
}
```

---

## Логика UI

Минимально нужны:

- кнопка `Прослушать`;
- повторное воспроизведение;
- отмена предыдущей речи перед новым `speak()`;
- состояние `speaking`, если оно понадобится для анимации/disable кнопки;
- fallback, если `speechSynthesis` недоступен.

События `SpeechSynthesisUtterance`, которые можно использовать:

```ts
utterance.onstart = () => {}
utterance.onend = () => {}
utterance.onerror = event => {}
```

---

## Важные ограничения

- качество и набор голосов зависят от браузера/ОС;
- одна и та же строка может звучать по-разному на разных устройствах;
- одиночные буквы могут произноситься не так, как ожидается педагогически — это нужно отдельно проверить на целевых браузерах;
- API подходит для готовой озвучки, но не даёт напрямую PCM/AudioBuffer для анализа;
- не смешивать эту задачу с экспериментами собственного синтезатора речи.

## Критерий готовности

Буква, слог или отдельное слово передаются одним методом `speak(text)`, корректно произносятся на русском языке, повторный запуск не наслаивается на предыдущий, ошибки и отсутствие API обрабатываются предсказуемо.

Использовать Web Speech API для воспроизведения учебных единиц: букв, слогов и отдельных слов.

Добавить браузерную озвучку букв, слогов и отдельных слов

## Цель

Добавить в приложение систему голосовых персонажей (`characters`), через которых ребёнок сможет в игровой форме выбирать подходящий стиль озвучки.

Основная причина: разным детям может быть комфортнее разная скорость речи и разная высота голоса. Вместо технических настроек `rate` / `pitch` дать выбор через понятных персонажей.

## Базовая идея

Каждый персонаж хранит набор настроек для `SpeechSynthesisUtterance`:

```ts
type VoiceCharacter = {
  id: string
  name: string
  rate: number
  pitch: number
  volume?: number
  voiceName?: string
  avatar?: string
}
```

Пример:

```ts
const characters: VoiceCharacter[] = [
  {
    id: 'calm-bear',
    name: 'Медвежонок',
    rate: 0.75,
    pitch: 0.85,
  },
  {
    id: 'default-friend',
    name: 'Друг',
    rate: 1,
    pitch: 1,
  },
  {
    id: 'fast-bird',
    name: 'Птичка',
    rate: 1.15,
    pitch: 1.35,
  },
]
```

Применение:

```ts
const utterance = new SpeechSynthesisUtterance(text)

utterance.lang = 'ru-RU'
utterance.rate = character.rate
utterance.pitch = character.pitch
utterance.volume = character.volume ?? 1
```

## Выбор персонажа

Нужен отдельный UI выбора персонажа:

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

Желательно, чтобы выбор ощущался как игровая настройка, а не как системный аудио-конфиг.

## Конструктор персонажа

Сразу предусмотреть отдельный конструктор, в котором можно создать своего персонажа.

Минимальные параметры:

- имя;
- `rate` — скорость речи;
- `pitch` — высота голоса;
- `volume` при необходимости;
- выбор одного из доступных системных голосов;
- визуальный образ/аватар;
- предпрослушивание на тестовой фразе.

Пример состояния конструктора:

```ts
type VoiceCharacterDraft = {
  name: string
  rate: number
  pitch: number
  volume: number
  voiceName?: string
  avatar?: string
}
```

## Диапазоны настроек

Не показывать ребёнку технические значения как основной интерфейс. Внутри можно использовать числовые диапазоны Web Speech API, но UI лучше делать понятным:

```text
Скорость:
медленно ←─────●─────→ быстро

Высота голоса:
низко ←─────●─────→ высоко
```

Для взрослых/редактора можно дополнительно отображать точные значения.

## Предпрослушивание

В конструкторе обязательно должна быть кнопка предпрослушивания:

```ts
const previewCharacter = (
  character: VoiceCharacterDraft,
  text = 'Привет! Давай учиться вместе.',
) => {
  window.speechSynthesis.cancel()

  const utterance = new SpeechSynthesisUtterance(text)
  utterance.lang = 'ru-RU'
  utterance.rate = character.rate
  utterance.pitch = character.pitch
  utterance.volume = character.volume

  const voice = window.speechSynthesis
    .getVoices()
    .find(item => item.name === character.voiceName)

  if (voice) {
    utterance.voice = voice
  }

  window.speechSynthesis.speak(utterance)
}
```

## Архитектура

Важно отделить персонажа от самого механизма озвучки.

```text
VoiceCharacter
↓
настройки речи
↓
SpeechPlayer / Pronouncer
↓
SpeechSynthesisUtterance
```

То есть `SpeechPlayer` не должен знать про конкретного «Медвежонка» или «Птичку». Он получает уже готовые параметры.

## Хранение

Предусмотреть:

- встроенные персонажи приложения;
- пользовательские персонажи;
- активного выбранного персонажа;
- сохранение пользовательского выбора между сессиями.

Конкретное хранилище выбрать в рамках архитектуры проекта: локальное состояние, localStorage или серверная сущность, если персонажи должны синхронизироваться между устройствами.

## Критерий готовности

Ребёнок может выбрать одного из готовых голосовых персонажей, услышать разницу в скорости/высоте речи, использовать его для дальнейшей озвучки, а также создать собственного персонажа через простой конструктор и сразу прослушать результат.

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

Добавить выбор и конструктор голосовых персонажей

Проработать маркетинг и позиционирование

## Контекст

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

Следующий качественно иной уровень — **чтение предложения как структурированного письменного высказывания**.

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

## Что входит во второй уровень

Нужно учитывать как минимум:

- последовательность слов в предложении;
- границы предложения;
- точку;
- запятую;
- вопросительный знак;
- восклицательный знак;
- двоеточие;
- тире;
- кавычки;
- скобки и другие знаки по мере необходимости;
- паузы;
- изменение интонации;
- логические и синтаксические связи между частями предложения.

## Отличие от первого уровня

На первом уровне основной объект исследования — письменное слово и его внутренние части.

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

Пунктуация здесь не является декоративным слоем. Она кодирует структуру, паузы, интонацию и отношения между частями высказывания.

## Отдельные сложности

### Озвучивание знаков препинания

С буквами и словами можно использовать прямую озвучку элемента. Со знаками препинания это не так очевидно.

Если просто озвучивать «запятая», «точка», «вопросительный знак», ребёнок узнает название символа, но это ещё не обязательно объясняет его функцию внутри реального чтения.

Возникает отдельная задача: показать связь между визуальным знаком и тем, **что он меняет в звучании и структуре фразы**.

### Объяснение назначения

Для знаков препинания недостаточно только распознавания формы. Нужно постепенно сформировать понимание их роли:

- где сделать паузу;
- где закончилась мысль;
- где меняется интонация;
- где одна часть высказывания отделяется от другой;
- как один и тот же набор слов может читаться по-разному при разной пунктуации.

### Контекстность

Значение и эффект знака проявляются не изолированно, а внутри предложения. Поэтому механика второго уровня почти наверняка потребует работы не с отдельным знаком, а с его действием в контексте высказывания.

## Цель задачи

Не описывать заранее конкретную механику реализации, а отдельно проработать сам второй уровень освоения письменности:

- его границы;
- состав навыков;
- зависимости от первого уровня;
- критерии освоения;
- объём материала;
- способы проверки переноса на новые предложения.

Конкретная интерактивная механика будет спроектирована отдельно после того, как структура уровня станет достаточно понятной.

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

Задачи

Проработать второй уровень освоения письменности: чтение предложений и пунктуация

Проработать маркетинг и позиционирование

Добавить выбор и конструктор голосовых персонажей

Добавить браузерную озвучку букв, слогов и отдельных слов

Исследовать параметрический синтез русских звуков и переходов между ними

Собрать браузерный прототип минимального MVP