Skip to content
React component for the web speech api
Branch: master
Clone or download
Latest commit cd020a8 Jun 13, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Defaulting voice to fiona Nov 4, 2016
example #8, #7 #9 Jun 13, 2015
src Defaulting voice to fiona Nov 4, 2016
test Defaulting voice to fiona Nov 4, 2016
webpack adding react-sppech May 17, 2015
.babelrc Upgrading react to 0.14 Jan 15, 2016
.editorconfig adding react-sppech May 17, 2015
.eslintrc adding react-sppech May 17, 2015
.gitignore adding react-sppech May 17, 2015
.npmignore #1 fixing casing issue breaking the build, updating readmw May 19, 2015
.travis.yml
LICENSE adding react-sppech May 17, 2015
README.md Update README.md Jun 13, 2017
index.html adding react-sppech May 17, 2015
index.js Upgrading react to 0.14 Jan 15, 2016
index.jsx Upgrading react to 0.14 Jan 15, 2016
logo.png adding react-sppech May 17, 2015
package.json Defaulting voice to fiona Nov 4, 2016

README.md

react-speech

React component for the Web Speech api.

The Web Speech API aims to enable web developers to provide, in a web browser, speech-input and text-to-speech output.

The Web Speech API comes in two parts, speech synthesis and speech recognition. This react component supports speech synthesis, text-to-speech.

build

React 0.13/0.14

If you are using React 0.14, please use a version >= 0.3.0 of react-speech.

Please use a version of react-speech before 0.3.0 for react 0.13.

Install

In order to install react-speech, simply run

$ npm install react-speech --save 

Simple Usage

Using react-speech, is pretty simple, simply React.render the speech component, setting the text property, which is rendered to speech.

  import React from 'react';
  import Speech from './speech';

  React.render(
    <Speech text="Welcome to react speech" />,
    document.getElementById('node')
  );

Here is a standalone version.

<html>
  <head>
    <title>React Speech</title>
  </head>
  <body>
    <div>
      <div id="app"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="../dist/react-speech.min.js"></script>

    <script type="text/jsx">
      var Speech = ReactSpeech;

      React.render(
        <Speech text="I have the default settings" />,
        document.getElementById('app')
      );
    </script>
  </body>
</html>

Speech Component API

Here is the full API for the <Speech> component, these properties can be set on an instance of Speech:

Property Type Default Required Description
styles Object Styles no see Styles
autostart Bool false no Start speech on page load.
text String none yes This attribute specifies the text to be synthesized and spoken for this utterance. Max 250 characters. See Issues with long text
pitch Number 1 no This attribute specifies the speaking pitch for the utterance. min=0 max=2 step=1
rate Number 1 no This attribute specifies the speaking rate for the utterance. max=3.5 min=0.5 step=0.5
volume Number 1 no This attribute specifies the speaking volume for the utterance. max=1 min=0 step=0.1
lang String en-GB no This attribute specifies the language of the speech synthesis for the utterance. EN-GB, EN-US
voice String Daniel no A voice as a string, please check supported voices for your browser.
textAsButton bool no no Display text as a button.
displayText string no no When displaying text as a button you can use this to display a different text string.
stop bool false no Display a stop button.
pause bool false no Display a pause button.
resume bool false no Display a resume button.
disabled bool false no Disables speech.

Styles

If you would like to override the default styles, simply pass in a style object. react-speech like React uses inline styles whose key is the camelCased version of the style name, and whose value is the style's value, usually a string.


let style = {
  container: { },
  text: { },
  buttons: { },
  play: {
    hover: {
      backgroundColor: 'GhostWhite'
    },
    button: {
      cursor: 'pointer',
      pointerEvents: 'none',
      outline: 'none',
      backgroundColor: 'Gainsboro',
      border: 'solid 1px rgba(255,255,255,1)',
      borderRadius: 6
    }
  },
  pause: {
    play: { }
    hover: { }
  },
  stop: {
    play: {
    hover: { },
    button: { }
  },
  resume: {
    play: {
    hover: { },
    button: { }
  }
};


Issues with long text

http://stackoverflow.com/questions/21947730/chrome-speech-synthesis-with-longer-texts

Supported broswers

If a browser does not support Web Speech API we simply display the text specified. If you are unsure about your browser:

http://caniuse.com/#feat=web-speech

Development

$ npm install
$ npm start

navigate to http://localhost:3000

Run tests

$ npm test

Run build

$ npm run build

or

$ npm run dist
$ npm run dist.min

Examples

Here are some examples of using react-speech

Default settings

<Speech 
  text="I have the default settings" />

Autostart speech

<Speech 
  autostart={false} 
  text="I have the default settings with autostart set to true" />

Altered my voice

<Speech 
  text="I have altered my voice" 
  voice="Google UK English Female" />

Set button colour

let style = {
  play: {
    button: {
      width: '28',
      height: '28',
      cursor: 'pointer',
      pointerEvents: 'none',
      outline: 'none',
      backgroundColor: 'yellow',
      border: 'solid 1px rgba(255,255,255,1)',
      borderRadius: 6
    },
  }
};

<Speech 
  styles={style} 
  text="I have changed the colour of the play button and made it smaller" />

Set pitch, rate and volume

<Speech
  autostart={false}
  text="I have altered the pitch, rate and volume of my voice"
  pitch="0.5"
  rate="0.5"
  volume="0.1"
  lang="en-GB"
  voice="Daniel" />

Set default properties

<Speech
  autostart={false}
  text="I have all properties set to their default"
  pitch="1"
  rate="1"
  volume="1"
  lang="en-GB"
  voice="Google UK English Male" />

Display pause, stop and resume buttons

<Speech
  stop={true} 
  pause={true} 
  resume={true} 
  text="I am displaying all buttons" />

Display text as a button, and override display text

let textstyle = {
  play: {
    hover: {
      backgroundColor: 'black',
      color:'white'
    },
    button: {
      padding:'4',
      fontFamily: 'Helvetica',
      fontSize: '1.0em',
      cursor: 'pointer',
      pointerEvents: 'none',
      outline: 'none',
      backgroundColor: 'inherit',
      border: 'none'
    },
}
  
<Speech 
  styles={textstyle} 
  textAsButton={true}    
  displayText="Hello" 
  text="I have text displayed as a button" />

License

See the License file.

You can’t perform that action at this time.