Speech Synthesis


Posted by wayne201299 on 2023-10-03

DEMO

變聲器,將輸入的文字用瀏覽器撥放,並可以自由調整撥放的語調跟頻率

實作

  1. 抓取要播放的語音文字,透過監聽事件取得所有語言的選單內容

     msg.text = document.querySelector('[name="text"]').value;
    
     speechSynthesis.addEventListener("voiceschanged", populateVoices);
    
     function populateVoices() {
         voices = this.getVoices();
    
         voicesDropdown.innerHTML = voices
             .filter((voice) => voice.lang.includes("en"))
             .map((voice) => {
                 return `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`;
             })
             .join("");
     }
    
  2. 切換語言時,重新設定播放的語音

     voicesDropdown.addEventListener("change", setVoice);
     function setVoice(e) {
         // 找到對應語言的聲音
         msg.voice = voices.find((voice) => voice.name === e.target.value);
     }
    
  3. 播放跟停止撥放

     speakButton.addEventListener("click", toggle);
     stopButton.addEventListener("click", toggle.bind(null, false));
    
     function toggle(startOver = true) {
         speechSynthesis.cancel();
         if (startOver) {
             speechSynthesis.speak(msg);
         }
     }
    

    這裡toggle的用法很直觀的都會使用toggle(false)的方式傳入參數,但eventlistener接收的是一段function,傳入toggle(false)並不會執行,必須要透過bind的方式建立function或arrow function

  4. 調整語調、頻率

     options.forEach((option) => {
         option.addEventListener("change", setOption);
     });
    
     function setOption() {
         msg[this.name] = this.value;
         toggle();
     }
    

知識點

  • SpeechSynthesisUtterance 是 Web Speech API 的一個類別,它是用於文本到語音轉換的 JavaScript 類別
  • speechSynthesis 是Web Speech API的一個介面,用來執行文本朗讀

#javascript







Related Posts

淺談 Markdown 格式

淺談 Markdown 格式

Return the summation of an array

Return the summation of an array

Ubuntu 對調左側 ctrl 鍵與大寫鍵的 keycode

Ubuntu 對調左側 ctrl 鍵與大寫鍵的 keycode


Comments