【Web】Text to Speech (TTS) 文字轉語音

tags: Javascript

Common

• 本篇主要介紹 Speech synthesis 語音合成，也就是文字轉語音
• Web Speech API 有提供三種功能
  1. Phrase matcher
  2. Speak easy synthesis
  3. Speech color changer

API Source

• Using the Web Speech API：Link

• source code 程式碼：Download

• 解壓縮後，請使用此資料夾：speak-easy-synthesis

  

Introduction 簡介

• 官方提供的 TTS Demo：Link

功能解說

• 輸入文字：可以輸入各種文字，但要不要轉成語音由系統決定
  • 語言是中文類的話
  • 中文、英文、數字，都會轉語音
  • 符號一律不轉語音，但會停頓
  • 符號不是打越多，停頓越久 → X
  • ，和，，，，，一樣都只會停頓一次
• 聲音速度：語音的速度，數值越高，話速越快
• 聲音頻率：語音的頻率，數值越高，聲音越尖銳
• 語言：影響輸入的文字是否轉成語音
  • 例如：設定韓文，就無法唸出中文
  • 有趣的地方是中文有三種，腔調都不同

Code 程式碼

HTML、CSS

• 可自己改成需要的介面
• 這部份很簡單，就不贅述
• 最簡單的只要有一個輸入框，其他什麼都不用

<input type="text" class="txt">

JavaScript

• 可自己加入參數改成需要的 function
• 以下為官方範例，最關鍵的部分：文字轉語音的 function

function speak(){
    if (synth.speaking) {
        console.error('speechSynthesis.speaking');
        return;
    }
    if (inputTxt.value !== '') {
    //取得輸入的文字
    var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
    utterThis.onend = function (event) {
        console.log('SpeechSynthesisUtterance.onend');
    }
    utterThis.onerror = function (event) {
        console.error('SpeechSynthesisUtterance.onerror');
    }
    //取得設定的語言
    var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
    for(i = 0; i < voices.length ; i++) {
      if(voices[i].name === selectedOption) {
        utterThis.voice = voices[i];
      }
    }
    //取得設定的音頻
    utterThis.pitch = pitch.value;
    //取得設定的話速
    utterThis.rate = rate.value;
    //文字轉語音
    synth.speak(utterThis);
  }
}

Example 改寫範例

• 需求
  1. 後端自行設定需要的文字
  2. 後端能自行設定文字重複的次數
  3. 呼叫 “文字轉語音的function”，並發出語音
• 作法
  1. 簡化程式碼：既然不需要設定話速、音頻、語言，就使用 default
  2. 將文字輸入的部分改放至參數
  3. 重複次數：加入 for 迴圈
• Code 程式碼

var synth = window.speechSynthesis;

function speak(text, repeatTimes) {
	var utterThis = new SpeechSynthesisUtterance(text);
	utterThis.onend = function(event) {
		console.log('SpeechSynthesisUtterance.onend');
	}
	utterThis.onerror = function(event) {
		console.error('SpeechSynthesisUtterance.onerror');
	}
	utterThis.pitch = 1;
	utterThis.rate = 1;
	for (var i = 0; i < repeatTimes; i++) {
		synth.speak(utterThis);
	}
}

Spicy 碎念心得

1. 網頁有趣的地方，就是能按照自己的喜好、需求，改寫
2. 不一定要按照別人的程式碼，官方的程式碼撰寫
3. 先理解別人/官方的程式碼的運作方式，在改寫成適合自己的程式碼，才是身為一個工程師該做的事，而不是只是一味的 copy, paste
4. 英文資源 >> 中文資源，英文真的要練好

Reference 參考資料

1. 圖片：https://blog.ipsumdomus.com/text-to-speech-in-nodejs-4aebd9603ff2
2. Using the Web Speech API：
   https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API#Speech_synthesis