TTS 자바스크립트로 구현하기

자바스크립트로 TTS를 구현하는 코드입니다.
window 객체를 사용해야하므로 next.js로 ssr를 구현하시는 분은 추가적인 작업이 필요합니다.

export const textToSpeech = (text: string, isActionHandler: (isAction: boolean) => void) => {
    const synthesis = window.speechSynthesis;
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = "ko-KR";
    utterance.onend = function (event) {
        isActionHandler(false);
    };
    synthesis.speak(utterance);
};

해당 함수는 speechSynthesis 인스턴스를 사용하며 입력받은 text를 한국어로 지정해 음성 합성을 실행합니다.

그리고 음성 합성이 종료되었다면 매개변수로 isActionHandler에 false값을 전달해 부모 함수에서 종료여부를 확인할 수 있습니다.

 

마지막으로 synthesis에 speak을 호출해 합성된 음성을 재생합니다.

 

https://github.com/KAEN7/code-zip/blob/main/TTS.ts