Friday August 7, 2015 - tags:    web speech, es6, react

a react component for web speech api



Introduction

This post will demonstrate react-speech, a react.js 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 react-speech

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>

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

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