[javascript] TTS(text-to-speech)적용방법 플러그인, 라이브러리(필요X)

 

 

국비교육에서 다른 팀원이 한 프로젝트를 보게 됐는데  TTS를 적용한 요리 레시피 사이트를 만든 걸 감명 깊게 봐서

꼭 나도 해봐야지 했던 게 있다.

 

마침 시간이 나던 차 기존 작업하던 개인 프로젝트에 적용해 보려 한다.

 

이제는 코드를 짜야하는데 

 

https://sub0709.tistory.com/86

[javascript] 플러그인 없는 Text-To-Speech 만들기

이 블로그에서 tts란 무엇인지 예제 또한 훌륭한 것이 있어 나에게만 맞게 조금만 수정해서 사용하게 되었다.

 

지금의 브라우저에서는 별도의 플로그인 없이 TTS를 상당한 고급 수준으로 사용할 수 있다(모든 브라우저는 X)

어떤 척도로 알수 있나? Speech Synthesis API가 지원되는 브라우저에 한해서만 가능하다.

 

자신이 넣고 싶은 값을 input 태그 안에 value에 넣으면 된다.

 

<input id="code_reddit" type="hidden" value="이곳에 원하는 값을 넣어주자" autocomplete="off">
<button class="btn" onclick="g_gout()"><i class="fas fa-volume-up"></i></button>

 

<script>
  var voices = [];
  function setVoiceList() {
  voices = window.speechSynthesis.getVoices();
  }
  
  setVoiceList();
  
  if (window.speechSynthesis.onvoiceschanged !== undefined) {
  	window.speechSynthesis.onvoiceschanged = setVoiceList;
  }
  
  function speech(txt) {
      if(!window.speechSynthesis) {
        alert("음성 재생을 지원하지 않는 브라우저입니다. 크롬, 파이어폭스 등의 최신 브라우저를 이용하세요");
        return;
      }

      var lang = 'ko-KR';
      var utterThis = new SpeechSynthesisUtterance(txt);

      utterThis.onend = function (event) {
        console.log('end');
      };

      utterThis.onerror = function(event) {
        console.log('error', event);
      };

      var voiceFound = false;

      for(var i = 0; i < voices.length ; i++) {
        if(voices[i].lang.indexOf(lang) >= 0 || voices[i].lang.indexOf(lang.replace('-', '_')) >= 0) {
          utterThis.voice = voices[i];
          voiceFound = true;
        }
      }
      if(!voiceFound) {
        alert('voice not found');
        return;
      }

      utterThis.lang = lang;
      utterThis.pitch = 1;
      utterThis.rate = 1; //속도

      window.speechSynthesis.speak(utterThis);
  }
  
  function g_gout(){
      var t = document.getElementById("code_reddit");
      speech(t.value);
  }
</script>

 

Result.

 

아이콘도 잘 적용 되어 이쁘게 나왔다

아이콘을 클릭하면 input value에 담아놨던 값이 음성으로 출력된다.