---
slug: "SafariのText-to-Speechを使って、HTMLを読み上げる"
title: "Safari の Text-to-Speech を使って、HTMLを読み上げる"
description: "\n\n\n基本的に、これだけのコードで発声する。"
url: "https://www.ytyng.com/blog/SafariのText-to-Speechを使って、HTMLを読み上げる"
publish_date: "2013-11-01T07:22:28Z"
created: "2013-11-01T07:22:28Z"
updated: "2026-02-27T10:43:59.456Z"
categories: ["PCその他"]
keywords: ""
featured_image_url: "https://media.ytyng.com/resize/20230812/62895300cdbd41c98354342581c09241.png.webp?width=768"
has_video: false
has_music: false
video_urls: []
music_urls: []
lang: "ja"
---

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

<div class="document">


<p>基本的に、これだけのコードで発声する。</p>
<pre class="literal-block">var ssu = new SpeechSynthesisUtterance('Hello, World');
window.speechSynthesis.speak(ssu);
</pre>
<p>僕が書いたのはこんなコード。モバイルの場合、速いので rate を 0.6 に設定している。</p>
<p>ssu.lang は、 "en-US" や "ja-JP" を入れる。</p>
<p>HTML上から鳴らせるため、EPUB でつくった iBooks 本も読み上げられるので、応用範囲が広い。</p>
<p>止めると時は、 window.speechSynthesis.cancel()</p>
<p>UIWebView からでも使えるんじゃないかな。</p>
<p>iOS7以上でしか試していない。</p>
<pre class="literal-block">&lt;script type="text/javascript"&gt;
  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);
  }

&lt;/script&gt;
</pre>
<p>ちなみに、Mac OSX 10.9 の iBooks の UA はこれ。</p>
<pre class="literal-block">mozilla/5.0 (macintosh; intel mac os x 10_9) applewebkit/537.71 (khtml, like gecko)
</pre>
<p>で、iOS7 iPad の iBooks の UA はこれ</p>
<pre class="literal-block">mozilla/5.0 (ipad; cpu os 7_0_3 like mac os x) applewebkit/537.51.1 (khtml, like gecko) mobile/11b511
</pre>
</div>