React component for the web speech synthesis api
Last updated a year ago by airasoul .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-speech 
SYNC missed versions from official npm registry.


React component for the Web Speech api.


Current Version build

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.


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

    <Speech text="Welcome to react speech" />,

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.


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

Supported broswers

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


$ npm install
$ npm start

navigate to http://localhost:3000

Run tests

$ npm test

Run build

$ npm run build


$ npm run dist
$ npm run dist.min


Here are some examples of using react-speech

Default settings

  text="I have the default settings" />

Altered my voice

  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

  text="I have changed the colour of the play button and made it smaller" />

Set pitch, rate and volume

  text="I have altered the pitch, rate and volume of my voice"
  voice="Daniel" />

Set default properties

  text="I have all properties set to their default"
  voice="Google UK English Male" />

Display pause, stop and resume buttons

  text="I am displaying all buttons" />

Display text as a button, and override display text

const textstyle = {
  play: {
    hover: {
      backgroundColor: 'black',
    button: {
      fontFamily: 'Helvetica',
      fontSize: '1.0em',
      cursor: 'pointer',
      pointerEvents: 'none',
      outline: 'none',
      backgroundColor: 'inherit',
      border: 'none'
  text="I have text displayed as a button" />


See the License file.

Current Tags

  • 1.0.2                                ...           latest (a year ago)

18 Versions

  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 0.3.2                                ...           4 years ago
  • 0.3.1                                ...           5 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.12                                ...           5 years ago
  • 0.2.11                                ...           5 years ago
  • 0.2.10                                ...           5 years ago
  • 0.2.8                                ...           5 years ago
  • 0.2.7                                ...           5 years ago
  • 0.2.6                                ...           5 years ago
  • 0.2.5                                ...           5 years ago
  • 0.2.4                                ...           5 years ago
  • 0.2.3                                ...           5 years ago
  • 0.2.2                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dependents (1)

Copyright 2014 - 2017 © |