모든 웹 페이지에 텍스트 음성 변환 기능을 추가하는 방법

그만큼 텍스트 음성 변환 기능은 말의 말하기 장치에 표시됩니다. 현재 랩톱, 태블릿 및 휴대 전화와 같은 기기 이미이 기능을 가지고있다.. 이러한 장치에서 실행되는 모든 응용 프로그램 (예 : 웹 브라우저)은 그것을 이용하다, 과 기능을 확장하다. 내레이션 기능은 애플리케이션에 적합한 보조 도구입니다. 풍성한 텍스트를 표시하다, 그것으로 듣기 옵션을 제공합니다. 웹 사이트 방문객에게.

웹 스피치 API

그만큼 웹 스피치 JavaScript API ~의 출입구 웹 브라우저로 Text-to-Speech 기능에 액세스. 따라서 텍스트가 많은 웹 페이지에 TTS (텍스트 음성 변환) 기능을 도입하고 독자가 콘텐츠를들을 수있게하려면이 편리한 API를 사용하거나 더 구체적으로 SpeechSynthesis 인터페이스.

초기 코드 및 지원 확인

시작하려면 다음과 같은 웹 페이지를 만들어 보겠습니다. 나레이션 된 샘플 텍스트, 과 3 개의 버튼.

     
  많은 친구들과 함께하는 토끼
  토끼는 매우 인기가있었습니다. 
 하지만 그는 거절했다. 
  이야기의 교훈…

버튼은 나레이션을위한 컨트롤. 이제 우리가 UA 지원 SpeechSynthesis 인터페이스. 그렇게하기 위해 우리는 자바 스크립트로 창문 객체에는 'speechSynthesis' 재산, 그렇지 않은가.

 onload = function () if ( 'speechSynthesis'in window) / * 음성 합성 지원 * / else / * 음성 합성 지원 안됨 * /

만약 speechSynthesis 사용할 수 있습니다. 먼저 에 대한 참조를 작성하십시오. speechSynthesis 우리가 신스 변하기 쉬운. 또한 우리 깃발을 들다 와 더불어 그릇된 가치 (우리는 나중에 그 목적을 포스트에서 볼 것입니다.) 참조 생성 및 이벤트 처리기 클릭 3 개의 버튼 (재생, 일시 중지, 정지)도 마찬가지입니다..

사용자가 버튼 중 하나를 클릭하면 해당 기능 (onClickPlay (), onClickPause (), onClickStop ())가 호출됩니다..

 if (윈도우의 'speechSynthesis') var synth = speechSynthesis; var flag = false; / * 버튼에 대한 참조 * / var playEle = document.querySelector ( '# play'); var pauseEle = document.querySelector ( '# pause'); var stopEle = document.querySelector ( '# stop'); / * 버튼에 대한 이벤트 핸들러를 클릭합니다 * / playEle.addEventListener ( 'click', onClickPlay); pauseEle.addEventListener ( 'click', onClickPause); stopEle.addEventListener ( 'click', onClickStop); function onClickPlay ()  function onClickPause ()  function onClickStop ()

사용자 정의 함수 만들기

이제하자. 클릭 기능 만들기 이벤트 처리기에서 호출 할 세 개의 개별 단추 중 하나.

1. 재생 / 재개

재생 버튼을 클릭하면 먼저 ~을 체크 해봐 깃발. 그것이 있다면 그릇된, 우리는 그것을 다음과 같이 설정했다. 참된, 그래서 나중에 언제든지 버튼을 클릭하면 먼저 만약 조건이 실행되지 않습니다. (깃발이 아닐 때까지 그릇된 다시).

그럼 우리는 새 인스턴스를 생성한다. SpeechSynthesisUtterance 스피치 볼륨, 스피치 스피어, 스피드, 피치, 스피치 언어 등의 정보를 담고있는 인터페이스. 기사 텍스트를 추가합니다. 생성자의 매개 변수로, 그것을 말 변하기 쉬운.

 function onClickPlay () if (! flag) flag = true; 발언 = 새로운 SpeechSynthesisUtterance (document.querySelector ( 'article') .textContent); utterance.voice = synth.getVoices () [0]; utterance.onend = function () flag = false; ; synth.speak (발화);  if (synth.paused) / * 나이트 해제 일시 중지 / 재개 * / synth.resume ();

우리는 SpeechSynthesis.getVoices () 방법 연설을위한 음성을 지정하다 사용자의 기기에서 사용할 수있는 음성으로 이 메서드는 장치에서 사용할 수있는 모든 음성 옵션의 배열을 반환하므로 첫 번째 사용 가능한 장치 음성을 할당하십시오. ~을 사용하여 utterance.voice = synth.getVoices () [0]; 성명서.

그만큼 ~을 끝내다 property는 다음과 같은 이벤트 핸들러를 나타냅니다. 연설이 끝날 때 실행된다.. 내부에서 우리는 깃발 변하기 쉬운 허위로 돌아 가기 연설을 시작하는 코드 실행될 수있다. 버튼이 다시 클릭 함.

그런 다음 SpeechSynthesis.speak () 방법으로 나레이션을 시작하다.. 우리는 또한 확인해야합니다. 내레이션이 일시 중지 된 경우, 우리는 읽기 전용을 사용합니다. SpeechSynthesis.paused 재산. 내레이션이 일시 중지 된 경우 나레이션을 다시 시작하다 버튼을 클릭하면됩니다. SpeechSynthesis.resume () 방법.

2. 일시 중지

이제 onClickPause () 먼저 확인하는 기능 나레이션이 진행 중이며 일시 중지되지 않은 경우. 우리는 이러한 조건을 SpeechSynthesis.speaking 그리고 SpeechSynthesis.paused 속성. 두 조건이 모두 해당되면 onClickPause () 기능 연설을 일시 중지하다 ~를 부름으로써 SpeechSynthesis.pause () 방법.

 function onClickPause () if (synth.speaking &&! synth.paused) / * 일시 중지 * / synth.pause ();

3. 중지

그만큼 onClickStop () 기능은 비슷하게 구축 된 onClickPause (). 연설이 진행중이면, 우리는 멈춰 ~를 부름으로써 SpeechSynthesis.cancel () 그 방법 모든 발언을 제거하다.

 function onClickStop () if (synth.speaking) / * 사파리에 대한 나레이션 중지 * / / * * / flag = false; synth.cancel ();

연설 취소시, ~을 끝내다 이벤트가 자동으로 실행됩니다., 이미 플래그 재설정 코드를 내부에 추가했습니다. 하나, Safari 브라우저에 버그가 있습니다. 이 이벤트가 시작되는 것을 막을 수 있습니다. 그래서 우리는 onClickStop () 기능. Safari를 지원하지 않으려는 경우에는하지 않아도됩니다..

브라우저 지원

최신 브라우저의 모든 최신 버전 전체 또는 부분 지원 음성 합성 API 용. Webkit 브라우저는 여러 탭에서 음성을 재생하지 않으며, 일시 중지는 버그가 있으며 (작동하지만 버그가 있음) 사용자가 Webkit 브라우저에서 페이지를 다시로드 할 때 재설정되지 않습니다..

실무 데모

아래의 라이브 데모를 보거나 Github의 전체 코드를 확인하십시오..

펜을보십시오 ?? ?? Ã ... Â¸에이¢CodePen에서 HONGKIAT (@hkdc)의 JavaScript - JavaScript.