node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »

simple-speak

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

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/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="https://unpkg.com/simple-speak@1.3.0-beta#._.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@2.2.4/dist/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/nfreear/simple-speak/1.3.0-beta/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@2.2.4/dist/jquery.min.js"></script>
<script src="build/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@2.2.4/dist/jquery.min.js"></script>
<script src="build/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/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="build/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/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="build/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.0-beta/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.