Update index.html

index.html

@@ -10,7 +10,7 @@
     <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
     <!-- 載入 QR Code 產生器 -->
     <script src="https://cdn.jsdelivr.net/npm/qrcode-generator/qrcode.js"></script>
-    <!-- 【已新增】載入 Pako 壓縮函式庫 -->
+    <!-- 載入 Pako 壓縮函式庫 -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>
     <style>
         /* 定義閃卡的翻轉效果 */
@@ -444,6 +444,7 @@
 
     <audio id="correct-sound" src="correct.mp3" preload="auto"></audio>
     <audio id="wrong-sound" src="wrong.mp3" preload="auto"></audio>
+    <audio id="api-audio-player" preload="auto"></audio>
 
     <footer class="fixed bottom-4 right-4 text-xs text-gray-500 text-right z-50">
         <p>遊戲設計者：新竹縣精華國中藍星宇</p>
@@ -562,6 +563,7 @@
             // 音效元素
             const correctSound = document.getElementById('correct-sound');
             const wrongSound = document.getElementById('wrong-sound');
+            const apiAudioPlayer = document.getElementById('api-audio-player');
 
 
             // 應用程式狀態
@@ -770,7 +772,7 @@
                                 frontText = '請聽發音'; 
                                 backText = card.english; 
                                 [speakBtn, speakSlowBtn].forEach(btn => btn.classList.remove('hidden')); 
-                                speakWord(card.english, 0.75); 
+                                speakWord(card.english); 
                                 answerInput.placeholder = "請輸入英文答案...";
                                 break;
                         }
@@ -797,7 +799,7 @@
                             case 'listen':
                                 frontText = '請聽發音'; backText = card.english;
                                 [speakBtn, speakSlowBtn].forEach(btn => btn.classList.remove('hidden'));
-                                speakWord(card.english, 0.75); 
+                                speakWord(card.english); 
                                 answerInput.placeholder = "請輸入英文答案...";
                                 break;
                         }
@@ -1096,9 +1098,9 @@
                 confetti({ particleCount: 150, spread: 70, origin: { y: 0.6 } });
             };
 
-            const speakWord = (word, rate) => {
-                 if ('speechSynthesis' in window) {
-                    if (window.speechSynthesis.speaking) { return; }
+            const speakWithBrowserTTS = (word, rate = 1) => {
+                if ('speechSynthesis' in window) {
+                    window.speechSynthesis.cancel();
                     const wordToSpeak = word.split('(')[0].trim();
                     const utterance = new SpeechSynthesisUtterance(wordToSpeak);
                     utterance.lang = 'en-US';
@@ -1106,6 +1108,70 @@
                     window.speechSynthesis.speak(utterance);
                 }
             };
+
+            const speakWord = async (word) => {
+                speakBtn.disabled = true;
+                speakSlowBtn.disabled = true;
+
+                const wordToSpeak = word.split('(')[0].trim();
+                if (!wordToSpeak) {
+                    speakBtn.disabled = false;
+                    speakSlowBtn.disabled = false;
+                    return;
+                }
+                
+                const cleanedWord = wordToSpeak.replace(/[^a-zA-Z\s-]/g, '');
+
+                // 【已修改】智慧判斷：如果是片語，直接用瀏覽器語音；如果是單字，才用 API
+                if (cleanedWord.includes(' ')) {
+                    speakWithBrowserTTS(cleanedWord, 0.75);
+                    speakBtn.disabled = false;
+                    speakSlowBtn.disabled = false;
+                    return;
+                }
+
+                try {
+                    const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${cleanedWord}`);
+                    if (!response.ok) throw new Error('API request failed');
+                    const data = await response.json();
+
+                    let audioUrl = '';
+                    if (data && data.length > 0) {
+                        for (const entry of data) {
+                            for (const phonetic of entry.phonetics || []) {
+                                if (phonetic.audio) {
+                                    if (phonetic.audio.includes('-us.mp3')) {
+                                        audioUrl = phonetic.audio;
+                                        break;
+                                    }
+                                    if (!audioUrl) audioUrl = phonetic.audio;
+                                }
+                            }
+                            if (audioUrl) break;
+                        }
+                    }
+
+                    if (audioUrl) {
+                        apiAudioPlayer.src = audioUrl;
+                        apiAudioPlayer.play().catch(error => {
+                            console.error("Audio playback error:", error);
+                            speakWithBrowserTTS(cleanedWord, 0.75);
+                        }).finally(() => {
+                            speakBtn.disabled = false;
+                            speakSlowBtn.disabled = false;
+                        });
+                    } else {
+                        speakWithBrowserTTS(cleanedWord, 0.75);
+                        speakBtn.disabled = false;
+                        speakSlowBtn.disabled = false;
+                    }
+                } catch (error) {
+                    console.error("Dictionary API error:", error);
+                    speakWithBrowserTTS(cleanedWord, 0.75);
+                    speakBtn.disabled = false;
+                    speakSlowBtn.disabled = false;
+                }
+            };
             
             const getCurrentWordToSpeak = () => {
                 if (currentMode === 'speed' && currentSpeedCard) return currentSpeedCard.english;
@@ -1234,8 +1300,18 @@
             prevBtn.addEventListener('click', () => { if (currentCardIndex > 0) { currentCardIndex--; displayCard(); }});
             nextBtn.addEventListener('click', () => { if (currentCardIndex < wordsForCurrentMode.length - 1) { currentCardIndex++; displayCard(); }});
             quizForm.addEventListener('submit', (e) => { e.preventDefault(); checkAnswer(); });
-            speakBtn.addEventListener('click', (e) => { e.stopPropagation(); const word = getCurrentWordToSpeak(); if(word) speakWord(word, 0.75); });
-            speakSlowBtn.addEventListener('click', (e) => { e.stopPropagation(); const word = getCurrentWordToSpeak(); if(word) speakWord(word, 0.2); });
+            
+            speakBtn.addEventListener('click', (e) => { 
+                e.stopPropagation(); 
+                const word = getCurrentWordToSpeak(); 
+                if(word) speakWord(word);
+            });
+            speakSlowBtn.addEventListener('click', (e) => { 
+                e.stopPropagation(); 
+                const word = getCurrentWordToSpeak(); 
+                if(word) speakWithBrowserTTS(word, 0.2);
+            });
+
             hintBtn.addEventListener('click', () => {
                 const card = currentMode === 'speed' ? currentSpeedCard : quizQueue[0];
                 if (!card) return;
@@ -1310,7 +1386,6 @@
                 generateLinkBtn.disabled = true;
                 
                  try {
-                    // 【已修改】使用 pako 壓縮資料
                     const wordsString = JSON.stringify(words);
                     const compressedData = pako.deflate(wordsString);
                     const base64Words = btoa(String.fromCharCode.apply(null, compressedData));
@@ -1396,21 +1471,19 @@
 
             confirmDeleteBtn.addEventListener('click', () => {
                 if (indexToDelete > -1) {
-                    // 【已修復】建立一個局部常數來保存索引，避免在 setTimeout 執行前被重置
                     const indexToRemove = indexToDelete;
 
                     const itemElement = wordListContainer.querySelector(`.list-item button[data-index="${indexToRemove}"]`)?.closest('.list-item');
                     if (itemElement) itemElement.classList.add('removing');
                     
                     setTimeout(() => {
-                        // 使用局部常數來執行刪除操作
                         words.splice(indexToRemove, 1);
                         saveWordsToStorage();
                         renderWordList();
                     }, 300);
                 }
                 confirmDeleteModal.classList.add('hidden');
-                indexToDelete = -1; // 為下一次操作重置全域變數
+                indexToDelete = -1;
             });
             
             randomQuestionsCheckbox.addEventListener('change', () => {
@@ -1442,7 +1515,6 @@
 
                 if (sharedData) {
                     try {
-                        // 【已修改】使用 pako 解壓縮資料
                         const binaryString = atob(sharedData);
                         const compressedData = new Uint8Array(binaryString.length).map((_, i) => binaryString.charCodeAt(i));
                         const decodedWordsString = pako.inflate(compressedData, { to: 'string' });