Power-tool wrapper around the browser Web Speech API —
Switch branches/tags
Clone or download


Build status — Travis-CI simple-speak on Npmjs js-semistandard-style License Total downloads ~ NPMJS.com Size of Javascript Browserify embed me

nfreear / simple-speak

Quickly add text-to-speech widgets to HTML, using the Web Speech API.

A powerful, straightforward Javascript wrapper around the Web Speech API in the browser. Zero-configuration speech synthesis / text-to-speech (TTS) (... with plenty of configuration potential if you need it).

Web browser compatibility:

  • Compatible ~ recent Chrome, Firefox, Safari and Microsoft Edge,
  • Not compatible ~ MS Internet Explorer.

Read the blog post. Suggest features and uses .. (An original Gist.)


  • An arbitrary HTML element or form field can be used as speeech input,
  • Simple Javascript and <iframe> embeds,
  • Speak and spell modes,
  • Supports all the voices and languages your Web browser supports.

See the release notes.

Install and test

Build with Browserify:

npm install
npm run build
npm test


Use Javascript hosted on the unpkg CDN (browse):

<div id="id-simple-speak"> Hello. I'm simple-speak. </div>

<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/simple-speak@1.3.2#._.js"></script>

Use Javascript hosted on the RawGit CDN:

<div id="id-simple-speak"> Hello. I'm simple-speak. </div>

<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nfreear/simple-speak/1.3.2/build/simple-speak.js"></script>

Speak static text within an arbitrary HTML <element> — zero-configuration:

<div id="id-simple-speak"> Hello. I'm simple-speak. </div>

<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="dist/simple-speak.js"></script>

Speak a text form-field, configure an alternative voice (configuration):

<label>Speech input <input id="id-simple-speak" value="Hi. I'm a text input box!"></label>

<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="dist/simple-speak.js" data-simple-speak='{ "voiceFamily": "Vicki" }'></script>


Simplified Chinese — Hello auntie:

<div id="id-simple-speak"> 你好阿姨 </div>

<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="dist/simple-speak.js"
        data-simple-speak='{ "lang": "zh-cn", "voiceFamily": "Google 普通话(中国大陆)" }'></script>


<div id="id-simple-speak"> Spell me! </div>

<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="dist/simple-speak.js" data-simple-speak='{ "mode": "spell" }'></script>


Listen for the speak.simpleSpeak, and Web Speech API events, for example, onboundary:

$('#id-simple-speak').on('speak.simpleSpeak', function (ev, utterance, config) {
  console.warn('speak: ', ev, utter, config);

  $(utterance).on('boundary', function (ev) {
    console.warn('boundary: ', ev);


You can embed simple-speak in an <iframe>, and optionally set a language:

  aria-label="Speech synthesis"
  class="simple-speak-ifr" width="100%" height="75"


A shortcode plugin for WordPress to speak and spell:

[speak] Hello [/speak]   ..   [spell] Spell me! [/spell]


License: MIT.

© 2017-2018 Nick Freear and contributors. @nfreear.