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@3.2.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.2.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.2.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.2.1/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/jquery@3.2.1/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/jquery@3.2.1/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 .