feat: slower Mandarin TTS, add 庞立亮 vocabulary

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: ALiangPang

index.html

@@ -22,7 +22,7 @@ <h1>Học Tiếng Trung</h1>
           </div>
         </div>
         <div class="progress-badge">
-          <span id="learned-count">0</span> / 150 từ
+          <span id="learned-count">0</span> / <span id="vocab-total">151</span> từ
         </div>
       </div>
     </header>
@@ -51,8 +51,8 @@ <h2>Xin chào! 你好!</h2>
           <div class="feature-grid">
             <div class="feature-item">
               <span>📖</span>
-              <strong>150 từ HSK1</strong>
-              <small>Có nghĩa tiếng Việt</small>
+              <strong>151 từ</strong>
+              <small>HSK1 + từ đặc biệt</small>
             </div>
             <div class="feature-item">
               <span>🔊</span>
@@ -96,7 +96,7 @@ <h2>🎤 Luyện phát âm</h2>
         </div>
         <div class="pronounce-card">
           <div class="pronounce-progress">
-            Từ <span id="pronounce-index">1</span> / 150
+            Từ <span id="pronounce-index">1</span> / <span id="pronounce-total">151</span>
           </div>
           <div class="pronounce-hanzi" id="pronounce-hanzi">你好</div>
           <div class="pronounce-pinyin" id="pronounce-pinyin">nǐ hǎo</div>

js/app.js

@@ -3,42 +3,95 @@
   'use strict';
 
   const STORAGE_KEY = 'hsk1-learned-words';
+  const DEFAULT_SPEECH_RATE = 0.65;
+  const SLOW_SPEECH_RATE = 0.45;
+  const MANDARIN_TTS = text =>
+    `https://dict.youdao.com/dictvoice?audio=${encodeURIComponent(text)}&type=1`;
+
   let learnedWords = loadLearned();
   let pronounceIndex = 0;
   let quizState = null;
   let chineseVoice = null;
+  let currentAudio = null;
 
   // --- Speech ---
+  function pickMandarinVoice(voices) {
+    const list = voices.filter(v => {
+      const lang = (v.lang || '').toLowerCase();
+      if (lang === 'zh-cn') return true;
+      if (!lang.startsWith('zh')) return false;
+      return !/(tw|hk|mo)/.test(lang);
+    });
+
+    const prefer = patterns =>
+      patterns.reduce((found, pattern) => {
+        if (found) return found;
+        return list.find(v => pattern.test(v.name) || pattern.test(v.lang));
+      }, null);
+
+    return (
+      prefer([
+        /普通话|mandarin/i,
+        /huihui|yaoyao|kangkang|tingting|yunxi|xiaoxiao|xiaoyi/i,
+        /google.*中文|chinese.*china|zh-cn/i
+      ]) ||
+      list.find(v => v.lang === 'zh-CN') ||
+      list[0] ||
+      null
+    );
+  }
+
   function initSpeech() {
     if (!('speechSynthesis' in window)) return;
 
     const loadVoices = () => {
-      const voices = speechSynthesis.getVoices();
-      chineseVoice =
-        voices.find(v => v.lang === 'zh-CN') ||
-        voices.find(v => v.lang.startsWith('zh')) ||
-        null;
+      chineseVoice = pickMandarinVoice(speechSynthesis.getVoices());
     };
 
     loadVoices();
     speechSynthesis.onvoiceschanged = loadVoices;
   }
 
-  function speak(text, rate = 0.85) {
-    if (!('speechSynthesis' in window)) {
-      alert('Trình duyệt không hỗ trợ phát âm. Hãy thử Chrome hoặc Edge.');
-      return;
-    }
+  function rateToPlayback(speechRate) {
+    return speechRate >= 0.55 ? 0.82 : 0.62;
+  }
+
+  function speakWithSynth(text, rate) {
+    if (!('speechSynthesis' in window)) return null;
 
     speechSynthesis.cancel();
     const utterance = new SpeechSynthesisUtterance(text);
     utterance.lang = 'zh-CN';
     utterance.rate = rate;
+    utterance.pitch = 1;
+    chineseVoice = pickMandarinVoice(speechSynthesis.getVoices()) || chineseVoice;
     if (chineseVoice) utterance.voice = chineseVoice;
     speechSynthesis.speak(utterance);
     return utterance;
   }
 
+  function speak(text, rate = DEFAULT_SPEECH_RATE) {
+    speechSynthesis.cancel();
+    if (currentAudio) {
+      currentAudio.pause();
+      currentAudio = null;
+    }
+
+    const audio = new Audio(MANDARIN_TTS(text));
+    audio.playbackRate = rateToPlayback(rate);
+    currentAudio = audio;
+
+    audio.play().catch(() => {
+      if (!('speechSynthesis' in window)) {
+        alert('Trình duyệt không hỗ trợ phát âm. Hãy thử Chrome hoặc Edge.');
+        return;
+      }
+      speakWithSynth(text, rate);
+    });
+
+    return audio;
+  }
+
   function flashAudioBtn(btn) {
     if (!btn) return;
     btn.classList.add('playing');
@@ -160,12 +213,12 @@
     updatePronounceCard();
 
     document.getElementById('btn-listen')?.addEventListener('click', e => {
-      speak(HSK1_VOCABULARY[pronounceIndex].hanzi, 0.85);
+      speak(HSK1_VOCABULARY[pronounceIndex].hanzi, DEFAULT_SPEECH_RATE);
       flashAudioBtn(e.currentTarget);
     });
 
     document.getElementById('btn-slow')?.addEventListener('click', e => {
-      speak(HSK1_VOCABULARY[pronounceIndex].hanzi, 0.55);
+      speak(HSK1_VOCABULARY[pronounceIndex].hanzi, SLOW_SPEECH_RATE);
       flashAudioBtn(e.currentTarget);
     });
 
@@ -303,6 +356,14 @@
   }
 
   // --- Init ---
+  function updateVocabTotal() {
+    const total = HSK1_VOCABULARY.length;
+    const vocabTotal = document.getElementById('vocab-total');
+    const pronounceTotal = document.getElementById('pronounce-total');
+    if (vocabTotal) vocabTotal.textContent = total;
+    if (pronounceTotal) pronounceTotal.textContent = total;
+  }
+
   function init() {
     initSpeech();
     setupNavigation();
@@ -311,6 +372,7 @@
     setupPronounce();
     setupQuiz();
     updateProgressBadge();
+    updateVocabTotal();
     if (window.HSK1Surprise) window.HSK1Surprise.init();
   }
 

js/vocabulary.js

@@ -149,5 +149,6 @@ const HSK1_VOCABULARY = [
   { hanzi: "字", pinyin: "zì", vietnamese: "chữ" },
   { hanzi: "昨天", pinyin: "zuótiān", vietnamese: "hôm qua" },
   { hanzi: "做", pinyin: "zuò", vietnamese: "làm" },
-  { hanzi: "坐", pinyin: "zuò", vietnamese: "ngồi" }
+  { hanzi: "坐", pinyin: "zuò", vietnamese: "ngồi" },
+  { hanzi: "庞立亮", pinyin: "Páng Lìliàng", vietnamese: "Pang Liliang (người tặng quà)" }
 ];