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.

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 'react-speech';

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

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

const 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" />

Altered my voice

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

Set button colour

const 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
  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
  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

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