TEXT 읽어주는 speechSynthesis api

TEXT 읽어주는 speechSynthesis api

안녕하세요 '밤구름'입니다.

이번 포스팅은 웹에서 TEXT를 읽어주는 speechSynthesis api에 대해서 다뤄보고자 합니다.

 

들어가기에 앞서 'speechSynthesis api'란 말 그대로 자바스크립트를 이용하여 본문에 있는 text를 읽어주는 무료 api입니다.

 

WDN사이트를 통하여 확인이 가능합니다.

https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance

SpeechSynthesisUtterance - Web APIs | MDN

이번 포스팅도 코드리뷰와 함께 사용법 알아보겠습니다.

사용된 코드로는 html/css/js/제이쿼리 정도가 되겠네요

코드

 

[HTML 부분]

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  

<div id="wrap">
  <div class="box">
    <div id="text">
      <span>간장 공장 공장장은 강 공장장이고 된장 공장 공장장은 장 공장장이다.<br>산 사람들과 선 사람 둘과 선사시대 사람들 속에 속해있는 사람들 속에서 선사람 둘을 솎아낼까. 선 사람 둘과 산 사람들과 선사시대 사람들 속에 섞여있는 선 사람들 속에 안 선 사람을 더 섞을까. 선사시대 사람들과 산 사람들과 선 사람 둘이 전부 서서 서로가 서로를 서로 솎아내려 할 때 선사시대 사람은 선 사람이나 안 선 사람이나 선한 사람이나 안 선 상태로 서로 손을 잡고 3433년 3월 13일 신시와 3시 33분 33초를 서로의 눈을 보며 말하자고 했다.</span>
    </div>
    <button>READ</button>
  </div>
</div>

 

[CSS 부분]

*{margin:0; padding:0; box-sizing:border-box;}
#wrap{display:flex; align-items: center; justify-content:center; height:100vh; width:100%; background-color:#ccc;}
.box{width:80%; height:300px; box-shadow:0 0 10px rgba(0,0,0,0.5); border-radius:15px; overflow:hidden; background-color:#fff;}
#text{margin:auto; padding:2%; text-align:center; display:flex; align-items: center; justify-content:center; height:80%; }
button{margin:auto; display:block; border-radius:50%; width:50px; height:50px; background-color:#ccc; cursor:pointer; border:0; box-shadow:0 0 10px rgba(0,0,0,0.9)}
.alertbox{background-color:rgba(0,0,0,0.7); position:fixed; display:flex; align-items: center; justify-content:center; height:100vh; width:100%; top:0; left:0; transition:1s; opacity:0; z-index:-1;}
.alertbox .box{display:flex; align-items: center; justify-content:center; opacity:0.7;}

 

[JS 부분]

$('button').click(function(){
 let sound = new SpeechSynthesisUtterance(`${$('#text span').text()}`);
  speechSynthesis.speak(sound);
})

사용법

사용법은 간단하다. 

1.읽을 텍스트 설정한다.

2.설정한 텍스트를 읽는다.

 

let sound = new SpeechSynthesisUtterance() // SpeechSynthesisUtterance() 선언하고 괄호 안에 읽을 텍스트를 입력하여 읽을 텍스트를 선언해준다.

speechSynthesis.speak(sound); // speechSynthesis.speak() 함수를 통하여 읽게 된다. 괄호 안에 읽을 텍스트를 넣으면 된다.

 

정말쉽다 이게 전부이다. 

심지어 무료이다. 간단하게 설정하여 쉽게 사용가능하다.

단점이 있다면 너무 기계가 읽는 듯한 목소리이고, 일부 브라우저에서는 사용이 불가능하다는 점이 있다.

 

공식 문서에는 목소리 설정, 특정 문장의 소리 설정 등이 있지만 여기서는 간단하게 사용 가능한 방법을 포스팅 하였다.

 

딱 2개 설정하고, 설정한 것을 읽게 한다 이것만 명심하고 사용하자