HTML版英語學習系統

這是一個完全免費、無需安裝、功能完整的英語學習工具，使用HTML + CSS +JavaScript實現。

功能

文本朗讀練習 - 輸入英文文章，系統朗讀幫助練習聽力和發音，適合跟讀練習，模仿學習；
實時詞典查詢 - 雙擊任意英文單詞即可查看釋義、音標和發音，適合新詞匯學習和發音；（這一點，使用 Free Dictionary API，要聯網）
分段學習 - 可以選擇朗讀全文、選中段落或當前段落；
重復練習 - 支持1-3次重復或循環播放，強化記憶；
學生自學 - 適合學生課文預習和自學；

個性化設置

語音選擇 - 可選擇不同的英語發音（美音、英音等）
語速調節 - 從0.5到2倍速，適應不同學習階段
音調控制 - 調整音調讓發音更清晰
音量控制 - 根據環境調整合適音量

運行截圖

雙擊單詞情況如下：

源碼如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>英語學習系統 - 文本轉語音與詞典查詢</title><style>body {font-family: Arial, sans-serif;max-width: 1000px;margin: 0 auto;padding: 20px;color: #333;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);min-height: 100vh;}.container {background: rgba(255, 255, 255, 0.95);border-radius: 15px;padding: 30px;box-shadow: 0 20px 40px rgba(0,0,0,0.1);}h1 {color: #2c3e50;text-align: center;margin-bottom: 10px;font-size: 28px;}.subtitle {text-align: center;color: #666;margin-bottom: 30px;font-style: italic;}.controls {margin: 20px 0;background-color: #fff;padding: 25px;border-radius: 12px;box-shadow: 0 4px 15px rgba(0,0,0,0.08);}textarea {width: 100%;height: 220px;margin: 10px 0;padding: 20px;border: 2px solid #e0e0e0;border-radius: 8px;font-size: 18px;line-height: 1.6;resize: vertical;box-sizing: border-box;transition: border-color 0.3s;}textarea:focus {outline: none;border-color: #667eea;box-shadow: 0 0 10px rgba(102, 126, 234, 0.2);}.parameter {display: flex;align-items: center;margin: 20px 0;justify-content: flex-start;gap: 15px;}.parameter label {min-width: 90px;text-align: right;margin-right: 15px;color: #555;font-weight: 600;}select {padding: 10px;border: 2px solid #e0e0e0;border-radius: 6px;background-color: #fff;font-size: 14px;transition: border-color 0.3s;}select:focus {outline: none;border-color: #667eea;}#voiceSelect {width: 460px;}#playCount {width: 130px;}input[type="range"] {width: 300px;height: 8px;margin: 0 15px;-webkit-appearance: none;background: linear-gradient(to right, #667eea, #764ba2);border-radius: 4px;outline: none;}input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;width: 20px;height: 20px;background: #fff;border: 3px solid #667eea;border-radius: 50%;cursor: pointer;box-shadow: 0 2px 6px rgba(0,0,0,0.2);}.value-display {min-width: 40px;text-align: center;background: #f8f9fa;padding: 5px 10px;border-radius: 4px;font-weight: 600;color: #667eea;}.status-display {margin: 25px 0;padding: 15px 20px;background: linear-gradient(135deg, #667eea, #764ba2);color: white;border-radius: 8px;font-size: 15px;font-weight: 500;text-align: center;}.buttons-container {margin-top: 25px;display: flex;justify-content: center;gap: 15px;flex-wrap: wrap;}.special-buttons {margin-top: 20px;padding-top: 20px;border-top: 2px solid #f0f0f0;display: flex;justify-content: center;gap: 15px;flex-wrap: wrap;}button {padding: 12px 25px;border: none;border-radius: 8px;font-size: 15px;font-weight: 600;cursor: pointer;transition: all 0.3s;color: white;background: linear-gradient(135deg, #4CAF50, #45a049);box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);}button:hover {transform: translateY(-2px);box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);}button:active {transform: translateY(0);}.special-button {background: linear-gradient(135deg, #2196F3, #1976D2);box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);}.special-button:hover {box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);}/* 詞典查詢相關樣式 */.word-popup {position: absolute;background: white;border: 2px solid #667eea;border-radius: 12px;padding: 25px;max-width: 450px;box-shadow: 0 10px 30px rgba(0,0,0,0.2);z-index: 1000;font-size: 14px;animation: popupShow 0.3s ease;}@keyframes popupShow {from { opacity: 0; transform: scale(0.9) translateY(-10px); }to { opacity: 1; transform: scale(1) translateY(0); }}.word-popup .word-header {display: flex;align-items: baseline;gap: 15px;flex-wrap: wrap;margin-bottom: 20px;border-bottom: 2px solid #f0f0f0;padding-bottom: 15px;}.word-popup h3 {margin: 0;color: #667eea;font-size: 24px;font-weight: 700;}.word-popup .phonetic {color: #666;font-family: monospace;background: #f8f9fa;padding: 4px 8px;border-radius: 4px;}.word-popup .audio-btn {background: linear-gradient(135deg, #667eea, #764ba2);border: none;padding: 8px 15px;border-radius: 6px;cursor: pointer;color: white;font-size: 13px;margin-bottom: 15px;transition: all 0.3s;}.word-popup .audio-btn:hover {transform: translateY(-1px);box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);}.word-popup .meanings {max-height: 350px;overflow-y: auto;margin-bottom: 20px;}.word-popup .meaning-group {margin-bottom: 20px;background: #fafbfc;padding: 15px;border-radius: 8px;}.word-popup .part-of-speech {color: #667eea;font-weight: 700;margin-bottom: 10px;font-size: 16px;}.word-popup ol {margin: 0;padding-left: 25px;color: #333;}.word-popup ol li {margin: 10px 0;line-height: 1.5;}.word-popup .definition {color: #333;margin-bottom: 6px;}.word-popup .example {color: #666;font-style: italic;background: #e8f4fd;padding: 8px;border-left: 3px solid #667eea;margin-top: 8px;border-radius: 4px;}.word-popup .close-btn {width: 100%;margin-top: 20px;padding: 12px;background: linear-gradient(135deg, #95a5a6, #7f8c8d);border: none;border-radius: 6px;cursor: pointer;color: white;font-weight: 600;}.word-popup .close-btn:hover {background: linear-gradient(135deg, #7f8c8d, #6c7b7d);}.error-message {position: fixed;bottom: 30px;right: 30px;background: linear-gradient(135deg, #e74c3c, #c0392b);color: white;padding: 15px 25px;border-radius: 8px;animation: fadeIn 0.3s ease;box-shadow: 0 6px 20px rgba(231, 76, 60, 0.3);font-weight: 600;}@keyframes fadeIn {from { opacity: 0; transform: translateY(30px); }to { opacity: 1; transform: translateY(0); }}.learning-tip {background: linear-gradient(135deg, #f093fb, #f5576c);color: white;padding: 15px;border-radius: 8px;margin-bottom: 20px;<!-- text-align: center; -->font-weight: 500;}@media (max-width: 768px) {body {padding: 10px;}.container {padding: 20px;}.parameter {flex-direction: column;align-items: flex-start;}.parameter label {text-align: left;margin-bottom: 8px;}#voiceSelect {width: 100%;}input[type="range"] {width: 100%;margin: 10px 0;}.buttons-container,.special-buttons {flex-direction: column;align-items: center;}button {width: 200px;}}</style>
</head>
<body><div class="container"><h1>英語學習系統</h1><p class="subtitle">文本轉語音 + 實時詞典查詢</p><div class="learning-tip">💡 (1)如果“開始朗讀”不發音，請考慮選擇語音是否不當。(2)可以設置播放次數，調整語速、音量和音調。(2)雙擊英文單詞可查看英文釋義、音標（這項功能需要聯網，使用 Free Dictionary API實現）。</div><div class="controls"><label>你可以在下面文本區域輸入文字，或者往其中粘貼復制的文本：</label><textarea id="textToSpeak" placeholder="請輸入英文文本開始學習...">Welcome to the English Learning System!
This is an interactive text-to-speech application with dictionary lookup.
You can practice pronunciation, adjust speech parameters, and learn new vocabulary.
Double-click on any word like "pronunciation" or "vocabulary" to see its definition and hear how it sounds.</textarea><div class="parameter"><label for="voiceSelect">語音：</label><select id="voiceSelect"></select><label for="playCount">次數：</label><select id="playCount"><option value="1">播放1次</option><option value="2">播放2次</option><option value="3">播放3次</option><option value="-1">循環播放</option></select></div><div class="parameter"><label for="rate">語速：</label><input type="range" id="rate" min="0.5" max="2" step="0.1" value="1"><span id="rateValue" class="value-display">1.0</span><label for="pitch">音調：</label><input type="range" id="pitch" min="0.5" max="2" step="0.1" value="1"><span id="pitchValue" class="value-display">1.0</span></div><div class="parameter">            <label for="volume">音量：</label><input type="range" id="volume" min="0" max="1" step="0.1" value="1"><span id="volumeValue" class="value-display">1.0</span></div><div class="status-display" id="statusDisplay">系統就緒 - 開始你的英語學習之旅！</div><div class="buttons-container"><button onclick="speak()">🔊 開始朗讀</button><button onclick="pause()">?? 暫停</button><button onclick="resume()">?? 繼續</button><button onclick="stop()">?? 停止</button><button class="special-button" onclick="speakSelectedText()">📖 讀選中文本</button><button class="special-button" onclick="speakCurrentParagraph()">📄 讀當前段落</button></div></div></div><script>let speechSynth = window.speechSynthesis;let utterance = null;let currentVoice = null;let voices = [];let playCount = 1;let totalPlayCount = 1;// 加載語音列表function loadVoices() {voices = speechSynth.getVoices();let voiceSelect = document.getElementById('voiceSelect');// 對語音進行排序voices.sort((a, b) => {if (a.lang < b.lang) return -1;if (a.lang > b.lang) return 1;return a.name.localeCompare(b.name);});// 創建語言分組的對象let voicesByLang = {};voices.forEach(voice => {if (!voicesByLang[voice.lang]) {voicesByLang[voice.lang] = [];}voicesByLang[voice.lang].push(voice);});voiceSelect.innerHTML = '';// 遍歷排序后的語言分組Object.keys(voicesByLang).sort().forEach(lang => {let groupElement = document.createElement('optgroup');groupElement.label = getLangLabel(lang);voicesByLang[lang].forEach((voice) => {let option = document.createElement('option');option.textContent = `${voice.name}`;option.setAttribute('data-voice-index', voices.indexOf(voice));if (currentVoice && voice.name === currentVoice.name) {option.selected = true;}groupElement.appendChild(option);});voiceSelect.appendChild(groupElement);});// 初始化當前語音if (!currentVoice && voices.length > 0) {currentVoice = voices[0];voiceSelect.selectedIndex = 0;}}// 添加雙擊事件監聽document.getElementById('textToSpeak').addEventListener('dblclick', function(e) {const selectedText = window.getSelection().toString().trim();if (selectedText && /^[a-zA-Z]+$/.test(selectedText)) {lookupWord(selectedText);}});// 查詢單詞async function lookupWord(word) {updateStatus(`正在查詢單詞 "${word}"...`);try {const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);const data = await response.json();if (data && data.length > 0) {showWordDefinition(word, data[0]);updateStatus(`單詞 "${word}" 查詢成功！`);} else {showError('未找到該單詞的釋義');updateStatus('查詢失敗 - 未找到釋義');}} catch (error) {showError('查詢失敗，請稍后重試');updateStatus('網絡查詢失敗');}}// 顯示單詞釋義function showWordDefinition(word, data) {let popup = document.createElement('div');popup.className = 'word-popup';// 構建釋義內容let content = `<div class="word-header"><h3>${word}</h3>${data.phonetics && data.phonetics[0]?.text ? `<span class="phonetic">${data.phonetics[0].text}</span>` : ''}</div>`;// 添加發音按鈕（如果有音頻鏈接）const audioUrl = data.phonetics?.find(p => p.audio)?.audio;if (audioUrl) {content += `<button class="audio-btn" onclick="playAudio('${audioUrl}')">🔊 播放發音</button>`;}// 添加釋義if (data.meanings && data.meanings.length > 0) {content += '<div class="meanings">';data.meanings.forEach(meaning => {content += `<div class="meaning-group"><div class="part-of-speech">${meaning.partOfSpeech}</div><ol>${meaning.definitions.map(def => `<li><div class="definition">${def.definition}</div>${def.example ? `<div class="example">Example: ${def.example}</div>` : ''}</li>`).join('')}</ol></div>`;});content += '</div>';}// 添加關閉按鈕content += '<button class="close-btn" onclick="this.parentElement.remove()">關閉</button>';popup.innerHTML = content;document.body.appendChild(popup);// 定位彈出框const selection = window.getSelection();const range = selection.getRangeAt(0);const rect = range.getBoundingClientRect();// 調整彈出位置，確保在可視區域內let left = rect.left + window.scrollX;let top = rect.bottom + window.scrollY + 10;// 檢查右邊界if (left + 450 > window.innerWidth) {left = window.innerWidth - 470;}popup.style.left = `${left}px`;popup.style.top = `${top}px`;}// 播放音頻function playAudio(url) {new Audio(url).play();}// 顯示錯誤信息function showError(message) {const errorDiv = document.createElement('div');errorDiv.className = 'error-message';errorDiv.textContent = message;document.body.appendChild(errorDiv);setTimeout(() => errorDiv.remove(), 3000);}// 獲取語言顯示名稱function getLangLabel(langCode) {const langNames = {'zh-CN': '中文 (中國)','zh-TW': '中文 (臺灣)','zh-HK': '中文 (香港)','en-US': '英語 (美國)','en-GB': '英語 (英國)','ja-JP': '日語 (日本)','ko-KR': '韓語 (韓國)','fr-FR': '法語 (法國)','de-DE': '德語 (德國)','es-ES': '西班牙語 (西班牙)','it-IT': '意大利語 (意大利)','ru-RU': '俄語 (俄羅斯)',};return langNames[langCode] || langCode;}// 初始化語音if (speechSynth.onvoiceschanged !== undefined) {speechSynth.onvoiceschanged = loadVoices;}setTimeout(loadVoices, 100);// 監聽播放次數選擇變化document.getElementById('playCount').addEventListener('change', function(e) {totalPlayCount = parseInt(e.target.value);});// 語音選擇改變事件document.getElementById('voiceSelect').addEventListener('change', function(e) {let selectedOption = e.target.options[e.target.selectedIndex];let voiceIndex = selectedOption.getAttribute('data-voice-index');currentVoice = voices[voiceIndex];});// 更新滑塊值顯示document.getElementById('rate').addEventListener('input', function(e) {document.getElementById('rateValue').textContent = parseFloat(e.target.value).toFixed(1);});document.getElementById('pitch').addEventListener('input', function(e) {document.getElementById('pitchValue').textContent = parseFloat(e.target.value).toFixed(1);});document.getElementById('volume').addEventListener('input', function(e) {document.getElementById('volumeValue').textContent = parseFloat(e.target.value).toFixed(1);});// 更新狀態顯示function updateStatus(message) {document.getElementById('statusDisplay').textContent = message;}// 創建并播放音頻function createAndPlayUtterance(text) {if (!text.trim()) {updateStatus('沒有文本可以朗讀');return;}utterance = new SpeechSynthesisUtterance(text);if (currentVoice) {utterance.voice = currentVoice;}utterance.rate = parseFloat(document.getElementById('rate').value);utterance.pitch = parseFloat(document.getElementById('pitch').value);utterance.volume = parseFloat(document.getElementById('volume').value);utterance.onend = function(event) {console.log(`第 ${playCount} 次播放結束`);if (totalPlayCount === -1 || playCount < totalPlayCount) {playCount++;updateStatus(`正在播放第 ${playCount} 次...`);setTimeout(() => createAndPlayUtterance(text), 500);} else {updateStatus('播放完成 ?');}};utterance.onstart = function() {updateStatus(`正在播放第 ${playCount} 次... 🔊`);};speechSynth.speak(utterance);}// 開始朗讀function speak() {stop();let text = document.getElementById('textToSpeak').value;playCount = 1;totalPlayCount = parseInt(document.getElementById('playCount').value);createAndPlayUtterance(text);}// 獲取選中的文本function getSelectedText() {const textarea = document.getElementById('textToSpeak');const start = textarea.selectionStart;const end = textarea.selectionEnd;if (start === end) {return '';}return textarea.value.substring(start, end);}// 獲取光標所在段落的文本function getCurrentParagraph() {const textarea = document.getElementById('textToSpeak');const text = textarea.value;const cursorPosition = textarea.selectionStart;// 將文本按換行符分割const paragraphs = text.split('\n');let currentPosition = 0;for (let i = 0; i < paragraphs.length; i++) {const paragraphLength = paragraphs[i].length + 1; // +1 是為了計入換行符const paragraphEnd = currentPosition + paragraphLength;if (cursorPosition <= paragraphEnd) {return paragraphs[i].trim();}currentPosition = paragraphEnd;}return paragraphs[paragraphs.length - 1].trim();}// 朗讀選中的文本function speakSelectedText() {stop();const selectedText = getSelectedText();if (!selectedText) {updateStatus('請先選中要朗讀的文本');return;}playCount = 1;totalPlayCount = parseInt(document.getElementById('playCount').value);updateStatus('開始朗讀選中文本...');createAndPlayUtterance(selectedText);}// 朗讀光標所在段落function speakCurrentParagraph() {stop();const currentParagraph = getCurrentParagraph();if (!currentParagraph) {updateStatus('光標所在位置沒有找到有效段落');return;}playCount = 1;totalPlayCount = parseInt(document.getElementById('playCount').value);updateStatus('開始朗讀當前段落...');createAndPlayUtterance(currentParagraph);}// 暫停朗讀function pause() {speechSynth.pause();updateStatus('已暫停 ??');}// 繼續朗讀function resume() {speechSynth.resume();updateStatus('繼續播放... ??');}// 停止朗讀function stop() {speechSynth.cancel();playCount = totalPlayCount;updateStatus('已停止 ??');}</script>
</body>
</html>

OK！