Web Speech API

voice data를 web apps 내에 통합시킬 수 있는 web API. text를 speech로 옮기는 speechSynthesis와 비동기적으로 음성을 인식하는 speechRecognition이 있다.

speechSynthesis

the Web Speech API의 interface중 하나로, Speech service에 대한 controller interface이다.

speechSynthesisUtterance

음성 요청을 나타낸다. 여기에는 음성 서비스가 읽어야 할 내용과 읽는 방법에 대한 정보(예: 언어, 음조 및 볼륨)가 포함되어 있다.

Method

speechSynthesis.getVoices()

speechSynthesisVoice objects를 return한다. voice들을 얻는 method.

speechSynthesis.speak()

utterance queue에 utterance를 추가한다. parameter로 utterance를 받음. 음성을 직접 소리내는 method.

Events

voiceChanged

list of speechSynthesisVoice objects가 바뀌었을 때 발생하는 event.

Example

getVoices()를 통해 voice 얻기.
voicesChanged event를 통해 음성이 변했을 때 바꾼 음성으로 인식하기.

// Store voices 
let voices = [];

function getVoices() {
  voices = speechSynthesis.getVoices();

  voices.forEach((voice) => {
    const option = document.createElement("option");

    option.value = voice.name;
    option.innerText = `${voice.name} ${voice.lang}`;

    voicesSelect.appendChild(option);
  });
}

// Voices changed
speechSynthesis.addEventListener("voiceschanged", getVoices);

SpeechSynthesisUtterance를 이용하여 음성으로 읽히고 싶은 utterance 전달하기, speak()를 이용하여 말하는 기능 추가하기

// Init speech synth
const message = new SpeechSynthesisUtterance();

// Set text
function setTextMessage(text) {
  message.text = text;
}

// Speak text
function speakText() {
  speechSynthesis.speak(message);
}

box.addEventListener("click", () => {
    setTextMessage(text);
    speakText();}

voices select 바뀔 때 해당 음성으로 설정하기

// Set voice
function setVoice(e) {
  message.voice = voices.find((voice) => voice.name === e.target.value);
}

// Change voice
voicesSelect.addEventListener("change", setVoice);