javascriptでテキスト読み上げ出来ないのかな?

おはようございます、豆珈琲です。
久しぶりにWeblioの単語テストを受けたところ、学生時代と代わりのないTOEICで600点到達可能性あり、程度でした。

朝起きて、コーヒーを飲んだところでふと「ブラウザの内容をjavascriptで読み上げることは可能か?」と思いたち調べました。

結果は可能です。

developer.mozilla.org

さっそく書き出して見る

HTMLコード

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Web Speech API Sample Page</title>
<script type="text/javascript" src="speach_sample.js"></script>
</head>
<body>

</body>
</html>

JSコード

"use strict"

window.onload = function (){
var ssiu = new SpeechSynthesisUtterance();
ssiu.text = 'Hello,world!!';
speechSynthesis.speak(ssiu);

};

 

解説もどき

Webブラウザ利用ということもあって、htmlでjsのコードを読み込むファイルを作成。(jsから必要に応じて自動生成とかないかな?)

今回はSpeechSynthesisUtteranceを使って音声を出すだけです。
例のごとくHello,world!!です。

SpeechSynthesisUtterance - Web API インターフェイス | MDN が2017/08/11時点で日本語に翻訳されていたかったため、英語で読みつつ、他のサイトを参照しながら作成しました。

次回予告?

日本語出力はできていないので、午後になったら手をつけようと思います。