Safari の Text-to-Speech を使って、HTMLを読み上げる

(Comments)

基本的に、これだけのコードで発声する。

var ssu = new SpeechSynthesisUtterance('Hello, World');
window.speechSynthesis.speak(ssu);

僕が書いたのはこんなコード。モバイルの場合、速いので rate を 0.6 に設定している。

ssu.lang は、 "en-US" や "ja-JP" を入れる。

HTML上から鳴らせるため、EPUB でつくった iBooks 本も読み上げられるので、応用範囲が広い。

止めると時は、 window.speechSynthesis.cancel()

UIWebView からでも使えるんじゃないかな。

iOS7以上でしか試していない。

<script type="text/javascript">
  function getSpeechRate(){
      var userAgent = window.navigator.userAgent.toLowerCase();
      if (userAgent.indexOf('iphone') != -1 || userAgent.indexOf('ipad') != -1 ||
          userAgent.indexOf('ipod') != -1) {
          return 0.6;
      }
      return 1;
  }

  function speech() {
    text = document.getElementById('text-box').value;
    var ssu = new SpeechSynthesisUtterance(text);
    ssu.volume = 1;
    ssu.rate = getSpeechRate();
    ssu.pitch = 1;
    ssu.lang = document.getElementById('language-selector').value;
    window.speechSynthesis.speak(ssu);
  }

</script>

ちなみに、Mac OSX 10.9 の iBooks の UA はこれ。

mozilla/5.0 (macintosh; intel mac os x 10_9) applewebkit/537.71 (khtml, like gecko)

で、iOS7 iPad の iBooks の UA はこれ

mozilla/5.0 (ipad; cpu os 7_0_3 like mac os x) applewebkit/537.51.1 (khtml, like gecko) mobile/11b511
Currently unrated

Comments

Recent Tweets

  • ytyng

    ytyng @ytyng

    俺もスタバアプリにログインできないよ
    9 months, 3 weeks ago

  • 安藤拓郎 Takuro Ando

    安藤拓郎 Takuro Ando @takuroando

    ytyng

    これまでいろんなグッズを作ってきたけど、今回は「お米」と聞いて買うしかないなと。今夜の夕食はコシヒカリ!箸もセットだし^^ https://t.co/01ucQx9qtw #腰乃展 #マンガ展 https://t.co/4VL2vOe0Og
    10 months ago

  • ytyng

    ytyng @ytyng

    講談社さんとやった全部入り電子書籍セットがギネスブックに登録されたよー https://t.co/rbkd3IYub0
    10 months ago