Giter VIP home page Giter VIP logo

speak.js's Introduction

speak.js

A port of the eSpeak speech synthesizer from C++ to JavaScript using Emscripten.

Enables text-to-speech on the web using only JavaScript and HTML5.

Note: This is an official active fork of a following original project

https://github.com/kripken/speak.js

Demo

http://speak-demo.herokuapp.com/

Usage

Very simple! Do this:

  • Include the script in your html header,

    <script src="speakClient.js"></script>

    (and make sure you have speakClient.js available, as well as speakWorker.js and speakGenerator.js)

  • Add a div with an audio element called 'audio' in your html body,

    <div id="audio"></div>

  • Call speak.play() to say stuff in JavaScript

    speak.play('hello world!');

See helloworld.html for a simple 'hello world', and demo.html for a more detailed example.

Options

You can also specify some options with calling speak(), by doing

  `speak.play('hello world', { option1: value1, option2: value2 .. }, onended)`

available options are:

  • amplitude: How loud the voice will be (default: 100)
  • pitch: The voice pitch (default: 50)
  • speed: The speed at which to talk (words per minute) (default: 175)
  • voice: Which voice to use (for a non-default voice, requires you to build speak.js to include the proper data. See Language Support below) (default: en/en-us)
  • wordgap: Additional gap between words in 10 ms units (default: 0)
  • noWorker: Do not use a web worker (see below in 'Architecture')

In addition, you can pass a callback function which will be called at the end of speech.

For example

  `speak.play('hello world', { pitch: 100 }, function(){console.log('completed!');});`

will talk in a very high-pitched voice and output 'completed!' on the console at the completion.

Audio Control

Once speech has started, you can pause it by

  `speak.pause();`

You can resume paused speech by

  `speak.resume();`

Architecture

speakClient.js is the file that you interact with. It defines speak(), and will load speakWorker.js in a web worker. speakWorker wraps around speakGenerator.js, which does the actual work of converting a string into a WAV file. The WAV data is returned to speak(), which then plays it in an HTML Audio element.

You can also use speak.js without a web worker. In that case, you don't need speakWorker.js, but you do need to load speakGenerator.js along with speakClient.js in your HTML page. speak(), if called with noWorker set to true in the options object, will directly call the WAV generation code in speakGenerator.js instead of forwarding the call to a worker which would have done the same.

Building

A prebuilt version is already included. But if you want to tinker with the source code though, you might want to build it yourself. To do so, run emscripten.sh inside src/. Note that you need to change the paths there.

Language Support

eSpeak supports multiple languages so speak.js can too. To do this, you need to build a custom version of speak.js:

  • Bundle the proper language files. For french, you need fr_dict and voices/fr. See commented-out code in emscripten.sh and bundle.py
  • Expose those files to the emulated filesystem, in post.js. See commented-out code in there as well.
  • Run emscripten.sh to build.

You then need to call speak() with the voice option that tells it to use the right voice for your language. For example, for French this should work:

  `speak.play('boulanger', { voice: 'fr' });`

speak.js's People

Contributors

kripken avatar

Stargazers

Robin Singh avatar Cat  avatar Daniel Dugovic avatar Marcel Greter avatar Sithdown avatar Brandy Bradham avatar Angus H. avatar Michael Anthony avatar Alexander Salas Bastidas avatar Pradeep avatar  avatar  avatar GuruM avatar Andrey Shchekin avatar Ryan Seys avatar Edward Ocampo-Gooding avatar Jorge Rubiano avatar Dank avatar Thomas White avatar Bloo Alien avatar Leo Gallucci avatar Vilmos Papp avatar Oscar Rendon avatar timb avatar xiaoao avatar  avatar Facundo Ferrero avatar Lei Zhang avatar Simon Last avatar  avatar Adams Chang avatar DEO avatar Sean Kelly avatar Ash avatar Sonny avatar Roni Nes avatar at4esn avatar Bryan Wills avatar Roman Liutikov avatar YOH avatar Michael Demarais avatar CodeGuru avatar Viet Hoang avatar Alexander Bihary avatar Javin avatar Angelo avatar william chang(張仲威) avatar David Stutz avatar Yaw Etse avatar  avatar xianbei avatar Ankur avatar Matt Hernandez avatar Dimitri Cabete Jorge avatar Tim Peterson avatar Emilio Castro avatar Mirco Zeiss avatar JinGen Lim avatar  avatar Ken Kan avatar Adam Barta avatar Rudolf Liebenberg avatar Carolina M. Koehn avatar Tony Watson avatar Vladimir Drižepolov avatar Shu Uesugi avatar  avatar dq avatar Patrick Kontschak avatar Dmitri Skjorshammer avatar Nation avatar Jon de M avatar  avatar Jacob Burenstam Linder avatar Paul Herve avatar John John avatar Tony avatar ti avatar Ben Pinkerton avatar Tatsuya Hiramatsu avatar Seth Huang avatar James B. Pollack, MFA  avatar shirkey avatar Jeff Stout avatar Luke Rodgers avatar Ryhan Hassan avatar Patrick Shields avatar Matt Baker avatar Jason Melo avatar Ben J. Poovakkatt avatar 정 경훈 (Kyung-hown Chung) avatar Ryoichi Hara avatar Adam avatar Alvin Wang avatar Reza Parang avatar Miaojiang (MJ) Deng avatar  avatar Nicolas Clerc avatar Andrew Danks avatar Jordan Burke avatar

Watchers

Katsuya avatar 정 경훈 (Kyung-hown Chung) avatar James Cloos avatar Derek Little avatar CodeGuru avatar Michał avatar Michael Anthony avatar Daniel Dugovic avatar Sam Suresh avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.