 鄭沛軒
|
fde7d1209b
|
feat: 實現 TTS 播放功能 + 改進詞彙選擇 UX 流程
## TTS 播放功能 (BluePlayButton)
- ✅ 實現瀏覽器內建 TTS 語音播放
- ✅ 添加瀏覽器支援檢測和錯誤處理
- ✅ 支援語速、音調、音量調整參數
- ✅ 改進播放/停止狀態管理
- ✅ 優化視覺回饋和無障礙體驗
## FlipMemory 組件整合
- ✅ 在單詞展示區添加播放按鈕
- ✅ 在例句區塊添加播放按鈕
- ✅ 防止播放觸發翻卡動作
## VocabChoiceQuiz UX 改進
- ✅ 移除自動跳頁邏輯，改為手動「下一題」
- ✅ 答題後顯示「下一題」按鈕取代「跳過」
- ✅ 在答案解析中添加單詞和例句播放功能
- ✅ 提供更好的學習體驗，讓用戶有時間查看解析
## 技術改進
- 🎵 使用 Web Speech API 實現 TTS
- 📱 響應式設計，支援多種按鈕尺寸
- 🛡️ 完善的錯誤處理和記憶體管理
- ⚡ 即時回應，無網路延遲
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-05 05:06:12 +08:00 |
|
鄭沛軒
|
d742cf52f9
|
feat: BluePlayButton 內建 TTS 邏輯重構 + TypeScript 錯誤修復
重構亮點:
• BluePlayButton 內建完整 TTS 播放邏輯
• 移除 8 個組件中 97 行重複代碼
• 組件使用極度簡化：複雜配置 → 一行代碼
技術優化:
• 修復 TypeScript "Type 'never'" 錯誤
• 重新設計邏輯流程，清晰的條件分支
• 支援標準 TTS + 自定義播放兩種模式
使用簡化:
• 從: <BluePlayButton isPlaying={state} onToggle={handler} />
• 到: <BluePlayButton text="hello" />
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-02 16:51:45 +08:00 |
|
鄭沛軒
|
df1c2b92ef
|
feat: 全應用播放按鈕統一為藍底漸層設計 + 架構簡化
組件統一:
• 創建 BluePlayButton 統一組件 - 支援 sm/md/lg 三種尺寸
• 替換 10 個組件中的播放按鈕為統一的藍底漸層設計
• 移除 AudioPlayer 中間層抽象，直接使用 BluePlayButton
清理優化:
• 刪除未使用的 TTSButton 和 AudioPlayer 組件
• 簡化組件架構，每個組件內建 TTS 播放邏輯
• 統一 speechSynthesis API 使用方式
視覺統一:
• 藍底漸層 + 綠色播放中狀態 + 波紋動畫
• 響應式尺寸適配不同使用場景
• 完整的播放/暫停/禁用狀態設計
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
2025-10-02 15:11:02 +08:00 |