JS) Web speech API로 음성 구현해보기

이번 미니 프로젝트에서 웹사이트에서 음성으로 말하는 기능을 구현하기 위해 Web Speech API를 사용하였다.

버튼 클릭 시 작성된 텍스트를 읽어주고, 텍스트를 클릭하면 음성을 멈추도록 구현했는데 정말 신기하고 재밌었다.

// 문서 객체 읽어드리고 생성하기
const introText = document.querySelector("#intro"); // text
const speakBtn = document.querySelector("#speakBtn"); // button

// web Speech API 객체를 가져오기
const speechContent = window.speechSynthesis;

// speech가 실행 중인지 여부를 확인하기 위한 변수
let isSpeaking = false;

// button을 누를 시 음성 출력
speakBtn.addEventListener("click", () => {
  speakIntroText(introText);
  // speech 시작 시 isSpeaking 변수를 true로 변경
  isSpeaking = true;
});

// text를 누를 시 현재 나오는 음성 정지
introText.addEventListener("click", () => {
  // 현재 실행 중인 음성을 취소하는 함수
  speechContent.cancel();
  isSpeaking = false;
});

// 음성을 실행하는 함수
function speakIntroText(text) {
  // SpeechSynthesisUtterance(): JS에서 인간의 음성으로 변환을 가능하게 해주는 객체
  const speech = new SpeechSynthesisUtterance(text.innerText);
  speech.lang = "ko-KR"; // 언어: 한국어
  speech.rate = 0.9; // 음성 속도 조절
  // 'speech.onend'콜백 함수를 사용해서 speech 종료 시 isSpeaking변수를 false로 변경
  speech.onend = () => {
    isSpeaking = false;
  };
  // 위 speech상수에 저장된 텍스트를 음성으로 변환하여 출력하기 true: 중복실행 방지
  speechContent.speak(speech, true);
}

 

 

 

참고 레퍼런스 ʕ ᵔᴥᵔ ʔ

• Web Speech API - MDN Web Docs
• 데브리 유튜브 - Web Speech AP를 활용한 토이프로젝트 소개 및 간단 코딩