Tại sao cần render âm thanh (Aural Rendering) cho tài liệu

Render âm thanh (Aural Rendering) là gì?

Aural Rendering là việc trình bày tài liệu dưới dạng **âm thanh/giọng nói** thay vì hình ảnh trực quan. Đây là công nghệ cốt lõi cho **truy cập web (web accessibility)** - đặc biệt phục vụ người khiếm thị hoặc giảm thị lực.

Tại sao cần thiết?

Người khiếm thị: Cách duy nhất để "đọc" nội dung web
Học đọc/học ngôn ngữ: Nghe phát âm chuẩn, theo dõi highlight text
Điều khiển xe/tại chỗ không nhìn màn hình: GPS, recipe app, podcast web
Giải trí tại nhà: Audiobook, báo nói, truyện audio
Tài liệu công nghiệp/y tế: Kỹ sư/bác sĩ nghe hướng dẫn khi tay bận
Đa nhiệm: Nghe email/bài viết khi làm việc khác

Mô hình không gian âm thanh (Aural Box Model)

Khác với visual box model (2D), aural canvas là **không gian 3D + thời gian**:

Không gian vật lý 3D: Âm thanh bao quanh (spatial audio) - điều khiển bằng azimuth (ngang), elevation (dọc)
Không gian thời gian: Tuần tự hóa âm thanh - pause-before, pause-after, cue-before, cue-after, play-during

CSS Speech Module - Các nhóm thuộc tính

Nhóm	Thuộc tính	Chức năng
Vị trí không gian	`azimuth`	Vị trí ngang (trái/phải/phía trước/sau)
Vị trí không gian	`elevation`	Vị trí dọc (trên/dưới/ngang tai)
Thời gian & Ngắt	`pause-before`, `pause-after`, `pause`	Khoảng lặng trước/sau
	`cue-before`, `cue-after`, `cue`	Âm thanh hiệu ứng trước/sau
	`play-during`	Âm thanh nền khi đọc
Giọng nói	`speech-rate`	Tốc độ nói (từ/phút)
	`voice-family`	Giọng đọc (nam/nữ/trẻ em/robot...)
	`pitch`, `pitch-range`	Độ cao & biên độ giọng
	`stress`	Nhấn mạnh (local peaks)
	`richness`	Độ giàu/brightness của giọng
Phát âm	`speak`	Có đọc không, đọc thế nào (normal/spell-out)
	`speak-numeral`	Đọc số (digits/continuous)
	`speak-punctuation`	Đọc dấu câu (code/none)
Âm lượng	`volume`	Độ to (0-100, silent, keywords)

Ví dụ: Bài báo hoàn chỉnh cho screen reader

<article style="
  voice-family: 'Vietnamese Female', 'Microsoft An', female;
  speech-rate: medium;        /* 180-200 wpm */
  pitch: medium;              /* Giọng trung bình */
  richness: 50;               /* Giọng tự nhiên */
  stress: 50;                 /* Nhấn mạnh vừa phải */
">
  <header style="pause-before: 500ms; cue-before: url('news-intro.wav');">
    <h1>Báo cáo thời tiết hôm nay</h1>
  </header>
  
  <section style="play-during: url('rain-ambience.wav') mix repeat;">
    <p>Hôm nay có mưa rải rác...</p>
  </section>
  
  <footer style="pause-after: 1000ms; cue-after: url('news-outro.wav');">
    <p>Cảm ơn quý vị đã theo dõi.</p>
  </footer>
</article>

Trạng thái hỗ trợ hiện tại

CSS Speech Module Level 1: W3C Candidate Recommendation
Screen readers: NVDA, JAWS, VoiceOver, Orca - hỗ trợ tốt các thuộc tính cơ bản
Trình duyệt web: Không render trực tiếp (cần extension hoặc reader mode)
CSS `speak` property: Đã deprecated trong một số spec, thay bằng display: none + ARIA live regions cho dynamic content

Best Practice cho Dev

Viết HTML semantic (heading, landmark, list) - screen reader hiểu cấu trúc
Dùng ARIA (aria-label, aria-live, role) cho dynamic content
Test với screen reader thật (NVDA free, VoiceOver built-in Mac/iOS)
CSS Speech chủ yếu cho **print-to-speech** hoặc **specialized voice browsers**