Text-2-Speech API - 튜토리얼

4907 단어 beginnershtmljavascripttutorial
이것은 빠른 자습서가 될 것입니다(비디오가 더 나은 경우 링크here's). 코드 편집기를 열고 HTML 파일을 생성합니다. 내부에서 기본 HTML skeleton 을 정의하고 다음과 같이 h1 및 p 태그를 추가합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem
      facere impedit eum perferendis ullam inventore quas vero cum similique.
      Voluptatum cupiditate eligendi beatae quos inventore omnis dolor, ullam
      recusandae maiores, cumque aspernatur. In fuga dignissimos officiis totam
      inventore vero natus possimus enim laudantium ullam numquam, laboriosam
      magnam nisi illum. Reiciendis.
    </p>
  </body>
</html>


그런 다음 ResponsiveVoice.org으로 이동합니다. 여기에서 Text2Speech API를 얻을 수 있습니다. 또한 완전히 무료이며 신용 카드 정보를 추가할 필요가 없습니다 :)

로그인으로 이동합니다.



앱 대시보드.


계정을 만드세요.


그리고 화면에 보이는 스크립트 태그를 복사합니다.

script 앞에 해당 </body> 태그를 입력합니다.

그런 다음 별도의 스크립트 태그를 만듭니다. 그리고 responsiveVoice.speak("hello world");를 추가합니다.
HTML 파일은 다음과 같아야 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem
      facere impedit eum perferendis ullam inventore quas vero cum similique.
      Voluptatum cupiditate eligendi beatae quos inventore omnis dolor, ullam
      recusandae maiores, cumque aspernatur. In fuga dignissimos officiis totam
      inventore vero natus possimus enim laudantium ullam numquam, laboriosam
      magnam nisi illum. Reiciendis.
    </p>

    <script src="https://code.responsivevoice.org/responsivevoice.js?key=YOUR_UNIQUE_KEY"></script>
    <script>
      responsiveVoice.speak("hello world");
    </script>
  </body>
</html>


이제 브라우저를 열면 "Hello World"가 들립니다.

우리는 이것을 더 역동적으로 만들 수 있습니다. "hello world"라고 말하는 대신 h1 태그 안에 무언가를 말할 수 있습니다. 그렇게 하려면 responsiveVoice.speak(document.getElementsByTagName("h1")[0].innerHTML)를 작성하십시오.

또한 페이지를 두 번째로 새로 고쳤을 때 다른 음성이 말했음을 알아차렸을 수도 있습니다. 말할 음성을 선택할 수도 있습니다. 다음은 모든 목소리의 list입니다.

음성을 선택한 후에는 responsiveVoice.speak 텍스트 뒤에 responsiveVoice.speak(document.getElementsByTagName("h1")[0].innerHTML, "Spanish Male") 기능에 추가할 수 있습니다.

이것으로 자유롭게 실험하십시오!
Java 및 객체 지향 프로그래밍[#2]
zsh-bd를 다시 구현했습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage