자바스크립트로 텍스트 소리 읽기
2583 단어 WebSpeechSynthesisAPIJavaScript
개시하다
자바스크립트로 가볍게 소리를 낭독할 수 있습니다.
웹 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
Reference
이 문제에 관하여(자바스크립트로 텍스트 소리 읽기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/taiko1/items/240eea6eb597701f83bb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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
Reference
이 문제에 관하여(자바스크립트로 텍스트 소리 읽기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/taiko1/items/240eea6eb597701f83bb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!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>
python -m http.server 8080
• 다양한 소리의 종류를 바꾸고 싶다
기다리다
참고 자료
참고 소스 코드: [javascript로 실시!]웹 Speech Synthesis API를 사용하여 브라우저에서 음성 읽기
https://shinmedia20.com/javascript-speech-synthesis
API 사용 방법 참조: 웹 페이지에서 브라우저의 사운드 작성 기능 사용 - 웹 Speech API Speech Synthesis
https://qiita.com/hmmrjn/items/be29c62ba4e4a02d305c
Reference
이 문제에 관하여(자바스크립트로 텍스트 소리 읽기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/taiko1/items/240eea6eb597701f83bb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(자바스크립트로 텍스트 소리 읽기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/taiko1/items/240eea6eb597701f83bb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
