Nhiệm vụ: Thêm tính năng lựa chọn và trình tạo nhân vật giọng nói

Mục tiêu

Thêm hệ thống nhân vật giọng nói (characters) vào ứng dụng, qua đó trẻ có thể chọn phong cách lồng tiếng phù hợp theo cách trò chơi hóa.

Lý do chính: trẻ em khác nhau có thể cảm thấy thoải mái hơn với tốc độ nói và cao độ giọng khác nhau. Thay vì các cài đặt kỹ thuật rate / pitch, hãy cung cấp lựa chọn thông qua các nhân vật dễ hiểu.

Ý tưởng cơ bản

Mỗi nhân vật lưu trữ một tập hợp các cài đặt cho SpeechSynthesisUtterance:

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

Ví dụ:

const characters: VoiceCharacter[] = [
  {
    id: 'calm-bear',
    name: 'Gấu con',
    rate: 0.75,
    pitch: 0.85,
  },
  {
    id: 'default-friend',
    name: 'Bạn bè',
    rate: 1,
    pitch: 1,
  },
  {
    id: 'fast-bird',
    name: 'Chim nhỏ',
    rate: 1.15,
    pitch: 1.35,
  },
]

Cách sử dụng:

const utterance = new SpeechSynthesisUtterance(text)

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

Lựa chọn nhân vật

Cần có một giao diện người dùng lựa chọn nhân vật riêng biệt:

• thẻ có tên và hình ảnh trực quan;
• nút nghe thử;
• nhân vật đang hoạt động/được chọn;
• lưu lựa chọn cho các bài tập tiếp theo;
• khả năng chuyển đổi nhanh chóng sang nhân vật khác.

Lý tưởng nhất là lựa chọn này mang lại cảm giác giống như một cài đặt trò chơi hơn là một cấu hình âm thanh hệ thống.

Trình tạo nhân vật

Cung cấp ngay một trình tạo riêng biệt nơi bạn có thể tạo nhân vật của riêng mình.

Các tham số tối thiểu:

• tên;
• rate — tốc độ nói;
• pitch — cao độ giọng nói;
• volume nếu cần;
• lựa chọn một trong các giọng đọc hệ thống có sẵn;
• hình ảnh trực quan/ảnh đại diện;
• nghe thử trên một câu kiểm tra.

Ví dụ về trạng thái trình tạo:

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

Khoảng cài đặt

Không hiển thị các giá trị kỹ thuật cho trẻ như giao diện chính. Bên trong có thể sử dụng các phạm vi số của Web Speech API, nhưng giao diện người dùng nên được làm cho dễ hiểu:

Tốc độ:
chậm ←─────●─────→ nhanh

Cao độ:
thấp ←─────●─────→ cao

Đối với người lớn/biên tập viên, các giá trị chính xác có thể được hiển thị bổ sung.

Nghe thử

Trình tạo phải có nút nghe thử:

const previewCharacter = (
  character: VoiceCharacterDraft,
  text = 'Xin chào! Hãy cùng học nhé.',
) => {
  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)
}

Kiến trúc

Điều quan trọng là tách biệt nhân vật khỏi chính cơ chế lồng tiếng.

VoiceCharacter
↓
cài đặt giọng nói
↓
SpeechPlayer / Pronouncer
↓
SpeechSynthesisUtterance

Nghĩa là SpeechPlayer không được biết về một "Gấu con" hay "Chim nhỏ" cụ thể nào. Nó nhận các tham số đã được chuẩn bị sẵn.

Lưu trữ

Cần chuẩn bị:

• các nhân vật tích hợp sẵn trong ứng dụng;
• các nhân vật do người dùng tạo;
• nhân vật đang được chọn hoạt động;
• lưu lựa chọn của người dùng giữa các phiên làm việc.

Chọn kho lưu trữ cụ thể trong phạm vi kiến trúc dự án: trạng thái cục bộ, localStorage hoặc thực thể máy chủ nếu các nhân vật cần được đồng bộ hóa giữa các thiết bị.

Tiêu chí hoàn thành

Trẻ có thể chọn một trong các nhân vật giọng nói có sẵn, nghe sự khác biệt về tốc độ/cao độ nói, sử dụng nhân vật đó để lồng tiếng tiếp theo, đồng thời tạo nhân vật của riêng mình thông qua một trình tạo đơn giản và nghe ngay kết quả.