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

Цель

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

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

Базовая идея

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

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

Пример:

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,
  },
]

Применение:

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 при необходимости;
• выбор одного из доступных системных голосов;
• визуальный образ/аватар;
• предпрослушивание на тестовой фразе.

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

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

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

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

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

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

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

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

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

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)
}

Архитектура

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

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

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

Хранение

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

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

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

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

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