자바스크립트로 텍스트 소리 읽기

개시하다


자바스크립트로 가볍게 소리를 낭독할 수 있습니다.
웹 Speech Synthesis API를 사용합니다.공짜로 즐거웠어요(^^)

자기 노트까지.공부하다

컨디션


windows10
python3 (anaconda) 
(※ 동작을 확인하기 전 로컬 호스트에서 부팅이 가능하면 피훈, 루비, appache 등이 아니어도 됩니다.)
브라우저 MicrosoftEdge
브라우저 크롬(ver74)

소스 코드


다음 HTML 만들기
C:\Users\사용자 폴더\sample로 저장합니다.
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>音声読み上げ</title>
</head>
<body>
<h1>音声合成</h1>
<input class="text" value="Speech API を使おう。" style="width: 80%; height: 40px; font-size: 40px;" />
<button onclick="speak()" style="height: 30px; width: 80px;">speak</button>

<!-- スクリプト部分 -->
<script>
function speak(){
  var speak   = new SpeechSynthesisUtterance();
  speak.text  = document.querySelector('.text').value;
  speak.rate  = 1; // 読み上げ速度 0.1-10 初期値:1 (倍速なら2, 半分の倍速なら0.5, )
  speak.pitch = 0; // 声の高さ 0-2 初期値:1(0で女性の声) 
  speak.lang  = 'ja-JP'; //(日本語:ja-JP, アメリカ英語:en-US, イギリス英語:en-GB, 中国語:zh-CN, 韓国語:ko-KR)

  sleep(2000);
  speechSynthesis.speak(speak);

}

function sleep(time){
  var date_1 = new Date().getTime();
  var date_2 = new Date().getTime();
  while (date_2 < date_1 + time){
    date_2 = new Date().getTime();
  }
  return;
};
</script>

<body>
<html>
# 동작 확인
로컬 WEB 서버 시작
※ 웹 서버를 거쳐야 합니다.단일 샘플."""만 가지고는 작동하지 않습니다.
python -m http.server 8080
브라우저를 통해 액세스할 수 있습니다.
http://localhost:8080/sample.html
버튼은 텍스트 상자의 내용을 읽습니다.

앞으로 하고 싶은 거.


• 다양한 소리의 종류를 바꾸고 싶다
기다리다

참고 자료


참고 소스 코드: [javascript로 실시!]웹 Speech Synthesis API를 사용하여 브라우저에서 음성 읽기
https://shinmedia20.com/javascript-speech-synthesis
API 사용 방법 참조: 웹 페이지에서 브라우저의 사운드 작성 기능 사용 - 웹 Speech API Speech Synthesis
https://qiita.com/hmmrjn/items/be29c62ba4e4a02d305c

좋은 웹페이지 즐겨찾기