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>

使ってみた感想

・OSやブラウザによって使用できる合成音声の種類が違うようです。
・Edge、Firefox、Chrome、Safari、Opera、iOS Safari、Chrome for Androidで使用できます。
・イントネーションや漢字の読み方はまだ微妙です。OSよって違う読み方をする場合もあります。
 漢字の読みについては平仮名表記にした方が確実そうです。
 イントネーションは、間に読点(、)を挟むことで多少調整できます。

参考URL

http://www.antytle.com/js/speech-synthesis-api
http://caniuse.com/#feat=speech-synthesis