使用 JavaScript 與文字轉語音 API

使用 TTS API 與 JavaScript 可以提升網頁應用程式的使用者體驗。Web Speech API 支援 Chrome 和 Firefox，提供語音合成和識別功能。本教程涵蓋如何整合 TTS API、將文字轉換為語音、客製化設定及使用可用的語音。

使用文字轉語音 (TTS) API 與 JavaScript 可以大幅提升網頁應用程式的使用者體驗。Web Speech API 支援現代瀏覽器如 Chrome 和 Firefox，提供強大的語音合成和語音識別工具。在本教程中，我們將探討如何將 TTS API 整合到您的 JavaScript 代碼中，將文字轉換為語音，客製化語音設定，並使用可用的語音。

開始使用 JavaScript 和文字轉語音

要開始，您需要對 HTML、CSS 和 JavaScript 有基本的了解。首先建立一個 HTML 文件，並使用 script src 標籤連結您的 JavaScript 文件。在您的 JavaScript 文件中，初始化語音合成物件並設置事件監聽器以便在語音準備好時使用。 const synth = window.speechSynthesis; // 等待語音加載 synth.onvoiceschanged = () => { const voices = synth.getVoices(); // 使用可用的語音 }; 語音加載完成後，您可以使用 synth.getVoices() 方法訪問它們。這將返回一個可用語音的列表，您可以用於語音合成。您可以使用 forEach 迴圈遍歷語音並在您的 HTML 中顯示它們。 const voiceSelect = document.getElementById('voice-select'); voices.forEach((voice) => { const option = document.createElement('option'); option.textContent = ${voice.name} (${voice.lang}); option.setAttribute('value', voice.lang); voiceSelect.appendChild(option); }); 接下來，您可以創建一個函數來從選定的語音合成語音。此函數從 textarea 元素中獲取文字輸入，並使用選定的語音生成語音。 const speak = () => { const text = document.getElementById('text-input').value; const voice = voices[voiceSelect.selectedIndex]; const utterance = new SpeechSynthesisUtterance(text); utterance.voice = voice; synth.speak(utterance); }; 添加事件監聽器到按鈕或表單提交以觸發 speak 函數。 const button = document.getElementById('speak-button'); button.addEventListener('click', speak); 通過這幾行代碼，您可以實時將文字轉換為語音。通過設置 SpeechSynthesisUtterance 物件的屬性來自定義語音速度、音調和音量。 utterance.rate = 0.8; utterance.pitch = 1; utterance.volume = 1; 當您繼續探索 Web Speech API 時，您會發現更多語音識別和控制語音合成事件的功能。請記得查閱官方文檔以獲取更多詳細信息和說明。

無縫整合 Speechify

在使用 JavaScript 的文字轉語音 API 時，Speechify 是最佳選擇。它與 Web Speech API 的無縫整合，使得實時將文字轉換為語音變得非常簡單。其全面的文檔和用戶友好的教程提供逐步指導，對於新手和有經驗的網頁開發者來說都是理想的選擇。使用 Speechify，您可以訪問多種可用語音，並自定義語音設置，如語速和音調。無論您是前端開發者還是軟體開發者，Speechify 是增強您的網頁應用程式並創造引人入勝的使用者體驗的完美工具。總之，使用 JavaScript 的文字轉語音 API 為網頁開發開啟了無限可能。通過將語音合成整合到您的專案中，您可以創造引人入勝且易於訪問的使用者體驗。無論您是前端開發者還是軟體開發者，學習如何利用 Web Speech API 將提升您的技能，並使您能夠構建動態應用程式。為何不嘗試一下，利用文字轉語音的力量讓您的網頁活起來。