Теоретическая основа проекта собрана в главном концепте [«учиться-легко.рф — обучение чтению как дешифровке письменного кода»](/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).

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

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

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

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

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

## Цель

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

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

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

Буквы, фонемы, слоги и слова могут использоваться как метаданные и названия примеров, но не должны определять архитектуру 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 или серверная сущность, если персонажи должны синхронизироваться между устройствами.

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

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

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

Задачи

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

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

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