---
slug: "SafariのText-to-Speechを使って、HTMLを読み上げる"
title: "Using Safari's Text-to-Speech to Read Aloud HTML"
description: "\n\nBasically, you can make it speak with just this code:"
url: "https://www.ytyng.com/en/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/Etc"]
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: "en"
---

# Using Safari's Text-to-Speech to Read Aloud HTML

<div class="document">

<p>Basically, you can make it speak with just this code:</p>
<pre class="literal-block">var ssu = new SpeechSynthesisUtterance('Hello, World');
window.speechSynthesis.speak(ssu);
</pre>
<p>This is the kind of code I wrote. For mobile, since it's fast, I set the rate to 0.6.</p>
<p>For <code>ssu.lang</code>, you can set it to "en-US" or "ja-JP".</p>
<p>Since it can be triggered from HTML, it can also read aloud iBooks created in EPUB format, so its range of applications is broad.</p>
<p>To stop it, use <code>window.speechSynthesis.cancel()</code>.</p>
<p>It might also work from UIWebView.</p>
<p>I've only tested it on iOS7 and above.</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>By the way, this is the user agent for iBooks on Mac OSX 10.9:</p>
<pre class="literal-block">mozilla/5.0 (macintosh; intel mac os x 10_9) applewebkit/537.71 (khtml, like gecko)
</pre>
<p>And this is the user agent for iBooks on iOS7 iPad:</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>
