ブラウザに文章を読み上げさせる

var synthes = new SpeechSynthesisUtterance("こんにちは");  // 読み上げる内容
synthes.lang = "ja-JP";                                     // 日本語で
speechSynthesis.speak(synthes);                             // 読み上げる

<div class="well">
  <textarea id="text" rows="3" style="width:100%">こんにちは。今日もプログラミングを楽しみましょう。</textarea>
  <p>
    <label>言語：
      <select id="lang">
        <option value="ja-JP">日本語</option>
        <option value="en-US">英語</option>
        <option value="ko-KR">韓国語</option>
        <option value="zh-TW">中国語（繁体字）</option>
      </select>
    </label>
    <label>速さ：<input type="range" id="rate" min="0.5" max="2" step="0.1" value="1"> <span id="rate-val">1.0</span></label>
  </p>
  <button type="button" id="speak" class="btn-primary">読み上げる</button>
  <button type="button" id="stop">止める</button>
</div>
<p id="speech-msg" class="alert alert-warning" hidden>このブラウザは音声の読み上げに対応していません。</p>

(function() {
    // 読み上げ機能があるか確認する
    if (!('speechSynthesis' in window)) {
        document.getElementById('speech-msg').hidden = false;
        return;
    }

    var rate = document.getElementById('rate');
    rate.addEventListener('input', function() {
        document.getElementById('rate-val').textContent = Number(rate.value).toFixed(1);
    });

    document.getElementById('speak').addEventListener('click', function() {
        // 読み上げる内容と設定をまとめた「発話」を作る
        var synthes = new SpeechSynthesisUtterance(document.getElementById('text').value);
        synthes.lang = document.getElementById('lang').value;  // 言語
        synthes.rate = Number(rate.value);                      // 速さ（1 が普通）

        speechSynthesis.cancel();        // 読み上げ中なら止めてから
        speechSynthesis.speak(synthes);  // 読み上げる
    });

    document.getElementById('stop').addEventListener('click', function() {
        speechSynthesis.cancel();
    });
})();