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.)

Features

• 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

Usage

Use Javascript hosted on the unpkg CDN:

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

<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]#._.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/[email protected]/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/[email protected]/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/[email protected]/dist/jquery.min.js"></script>
<script src="dist/simple-speak.js" data-simple-speak='{ "voiceFamily": "Vicki" }'></script>

Localized

Simplified Chinese — Hello auntie:

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

<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="dist/simple-speak.js"
        data-simple-speak='{ "lang": "zh-cn", "voiceFamily": "Google 普通话（中国大陆）" }'></script>

Spell

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

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

Events

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);
  });
});

Iframe

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

<iframe
  aria-label="Speech synthesis"
  class="simple-speak-ifr" width="100%" height="75"
  src="https://cdn.rawgit.com/nfreear/simple-speak/1.3.2/embed/?lang=fr;q=Bonjour"></iframe>

WordPress

A shortcode plugin for WordPress to speak and spell:

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

License

License: MIT.

© 2017 Nick Freear and contributors. @nfreear.