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.