JavaScript實現語音合成的核心方法是使用web speech api中的speechsynthesis接口。要檢查瀏覽器是否支持語音合成，可使用if (‘speechsynthesis’ in window)進行判斷；創建并配置語音實例需通過speechsynthesisutterance對象設置文本、語言、語速、音調和音量等參數；可通過speechsynthesis.getvoices()獲取可用語音并動態生成選擇列表；控制播放使用speak()、pause()、resume()和cancel()方法；還可監聽onstart、onend、onerror等事件以執行相應操作；此外，優化效果可通過簡潔文本、調整語速音調、使用ssml或考慮第三方服務如google cloud text-to-speech、amazon polly等來實現。
JavaScript實現語音合成，核心在于利用Web Speech API中的SpeechSynthesis接口。簡單來說，就是把文字轉換成聲音播放出來，讓你的網頁“開口說話”。
JS語音合成的4種調用方式
如何檢查瀏覽器是否支持語音合成？
首先，你需要確認用戶的瀏覽器是否支持SpeechSynthesis。這很簡單：
if ('speechSynthesis' in window) { console.log('瀏覽器支持語音合成'); } else { console.log('瀏覽器不支持語音合成'); // 可以考慮提供降級方案，例如顯示文字提示 }
這段代碼直接檢查window對象中是否存在speechSynthesis屬性。如果存在，就說明瀏覽器支持語音合成。如果不支持，你可以給用戶一些提示，或者提供其他替代方案。
創建和配置語音合成實例
接下來，你需要創建一個SpeechSynthesisUtterance實例，并進行配置。這個實例包含了要朗讀的文本、語速、音調等等。
const utterance = new SpeechSynthesisUtterance(); utterance.text = '你好世界！Hello World!'; // 設置要朗讀的文本 utterance.lang = 'zh-CN'; // 設置語言 utterance.rate = 1.0; // 設置語速，范圍0.1到10 utterance.pitch = 1.0; // 設置音調，范圍0到2 utterance.volume = 1.0; // 設置音量，范圍0到1
這里，我們設置了朗讀的文本為中英文混合，語言為中文，語速和音調都設置為默認值1.0，音量也設置為最大值1.0。你可以根據需要調整這些參數。比如，想要讓聲音更低沉一些，可以降低pitch的值。
選擇合適的語音（Voice）
不同的瀏覽器可能提供不同的語音。你可以通過speechSynthesis.getVoices()方法獲取可用的語音列表，并選擇一個合適的。
let voices = []; function populateVoiceList() { voices = speechSynthesis.getVoices(); // 這里可以根據voices數組，動態創建下拉列表，讓用戶選擇語音 // 例如： // const voiceSelect = document.querySelector('select[name="voice"]'); // voices.forEach(voice => { // const option = document.createElement('option'); // option.textContent = `${voice.name} (${voice.lang})`; // option.value = voice.name; // voiceSelect.appendChild(option); // }); } populateVoiceList(); if (speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = populateVoiceList; } // 選擇語音 // const selectedVoiceName = voiceSelect.selectedOptions[0].value; // utterance.voice = voices.find(voice => voice.name === selectedVoiceName);
這段代碼首先獲取了可用的語音列表，然后可以根據這些語音動態創建一個下拉列表，讓用戶選擇。如果speechSynthesis.onvoiceschanged事件可用，我們還會在語音列表發生變化時重新填充列表。最后，根據用戶選擇的語音，設置utterance.voice屬性。
控制語音合成的播放
最后，你可以使用speechSynthesis.speak()方法開始播放語音，使用speechSynthesis.pause()方法暫停播放，使用speechSynthesis.resume()方法恢復播放，使用speechSynthesis.cancel()方法停止播放。
speechSynthesis.speak(utterance); // 開始播放 // 暫停播放 // speechSynthesis.pause(); // 恢復播放 // speechSynthesis.resume(); // 停止播放 // speechSynthesis.cancel();
這幾個方法可以讓你靈活控制語音合成的播放過程。例如，你可以創建一個按鈕，點擊后暫停播放，再次點擊后恢復播放。
如何處理語音合成的事件
SpeechSynthesisUtterance對象還提供了一些事件，例如onstart、onend、onerror等等。你可以監聽這些事件，以便在語音合成的不同階段執行相應的操作。
utterance.onstart = function(event) { console.log('開始播放'); }; utterance.onend = function(event) { console.log('播放結束'); }; utterance.onerror = function(event) { console.error('播放出錯', event); };
通過監聽這些事件，你可以更好地控制語音合成的過程，例如在播放結束后執行一些清理操作，或者在播放出錯時顯示錯誤信息。
語音合成在實際應用中的局限性
雖然SpeechSynthesis API很方便，但在實際應用中也存在一些局限性。例如，不同瀏覽器提供的語音質量可能不同，對于某些語言的支持也可能不夠完善。此外，對于復雜的文本，語音合成的效果可能不夠自然。因此，在選擇使用SpeechSynthesis API時，需要充分考慮這些因素。
優化語音合成效果的一些技巧
為了提高語音合成的效果，可以嘗試以下一些技巧：
- 使用清晰、簡潔的文本：避免使用過于復雜或含糊不清的句子。
- 適當添加停頓：可以使用逗號、句號等標點符號來控制停頓。
- 調整語速和音調：根據文本的內容和語氣，調整語速和音調，使聲音更自然。
- 選擇合適的語音：嘗試不同的語音，選擇最適合文本的語音。
- 使用SSML：SSML（Speech Synthesis Markup Language）是一種用于控制語音合成的標記語言。可以使用SSML來更精細地控制語音的各個方面，例如發音、語調、停頓等等。
考慮使用第三方語音合成服務
如果SpeechSynthesis API無法滿足你的需求，可以考慮使用第三方語音合成服務。這些服務通常提供更高質量的語音、更豐富的語言支持和更多的控制選項。例如，Google Cloud Text-to-Speech、Amazon Polly、microsoft azure Text to Speech等。使用這些服務通常需要付費，但可以獲得更好的語音合成效果。
