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

  • 大坂昌彦

    大坂昌彦 @masahiko_osaka

    ytyng

    ついに犯人がわかってしまいました! ナル、一昨日にも僕だったので、昨日の人しかいません!! ペダルにガムテープ貼っても良いけど、剥がして帰って欲しい。散々、自分の足で踏みつけたガムテープを何で次の人が剥がさなきゃならないの??自分… https://t.co/Contz66ZK9
    1 week ago

  • ytyng

    ytyng @ytyng

    Shopify の在庫数更新API GraphQLの場合: 一括更新できる 絶対値更新できない REST API の場合: 一括更新できない 絶対値更新できる なんなのそれ https://t.co/0QyibNQXdt
    3 weeks, 2 days ago

  • ytyng

    ytyng @ytyng

    #bulma スペーシングヘルパー、マージされてる! もうこれBootstrapじゃん https://t.co/uI8fZ6lAOw
    3 weeks, 2 days ago

Recent Posts

Archive

2020
2019
2018
2017
2016
2015
2014
2013
2012
2011

Categories

Authors

Feeds

RSS / Atom