Speech Synthesis API を使って動的に音声を読み上げる
Web Speech APIの一つ、Speech Synthesis API を使って動的に音声読み上げさせるサンプルです。
最近の標準的なブラウザで使用でき、音声データを用意することなく読み上げ機能を実現できます。
動作サンプル
サンプルコード
<!DOCTYPE html> <html> <head> <title>音声読み上げサンプル</title> <meta charset="UTF-8"> </head> <body> <p> <input id="text" type="text" size="60" value="吾輩は猫である。名前はまだない。"> <button id="play">音声読み上げ</button> </p> <script> document.getElementById('play').addEventListener('click', function(){ var text = document.getElementById('text').value; speak(text); }); var tmp; function speak(text) { // 再生中の音声をキャンセル speechSynthesis.cancel(tmp); // 日本語音声で読み上げ var speech = new SpeechSynthesisUtterance(); speech.lang = 'ja-JP'; speech.text = text; speechSynthesis.speak(speech); tmp = speech } </script> </body> </html>
