grvcoelho/react-voice-components

Set of React components that use the Web Speech API to bring voice experience to React applications

react-voice-components

Set of React components that use the Web Speech API to bring voice experience to React applications. Check out the ✨ 💎 LIVE DEMO 💎 ✨

Install

Install the components using npm:

$ npm install --save react-voice-components

Usage

1. Import components:

import { VoicePlayer, VoiceRecognition } from 'react-voice-components'

2. Use it:

ReactDOM.render(
  <VoicePlayer
    play
    text="React voice player demonstration"
  />,
  document.getElementById('root')
)

API

<VoicePlayer />

Provides you a simple React component to do speech synthesis (text to speech).

Options

Property	Options	Description
play	boolean	Specifies if the speech should be played when mounted.
pause	boolean	Specifies if the speech should pause
text	string	Specifies the text that shall be spoken.
lang	en-US, en-GB, es-ES, fr-FR, it-IT, de-DE, ja-JP, pt-BR, zh-CN	Specifies the accent and language the speech will be spoken.

Event Callbacks

Property	Description
onStart	Runs when the speech starts to be spoken.
onEnd	Runs when the speech completes to be spoken.
onPause	Runs when te speech is paused.
onResume	Runs when the speech is resumed.

<VoiceRecognition />

Provides you a simple React component to do voice recognition (speech to text).

Options

Property	Options	Description
continuous	boolean	Specifies if the recognition should continue when the user pauses while speaking.
stop	boolean	Specifies if the recognition should be stoped (when used with continuous=true)

Event Callbacks

Property	Description
onStart	Runs when the recognition starts.
onEnd	Runs when the recognition ends.
onError	Runs when there is a recognition error.
onResult	Runs when there is a recognition result.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

LICENSE

MIT (c) 2017 Guilherme Rv Coelho

react-voice-components's Issues

'end' event listener cannot detect empty string

If I pass "" for the props.text, speak() runs setting state.started and state.playing to true, but state.started never gets set to false by the 'end' event listener.

This means that when I pass in new props, they are not detected under the current logic defined within componentWillReceiveProps.

Module parse failed

Hi everyone, I'm having trouble importing VoicePlayer into my project. Anyone know what the problem is? This is the error I get.

I'm trying to get this to work in a project made with create-react-app

error repro: https://github.com/tjiang11/react-bug-repro

./~/react-voice-components/lib/VoicePlayer.js
Module parse failed: /home/tjiang11/Documents/Projects/lingua/node_modules/react-voice-components/lib/VoicePlayer.js Unexpected token (19:15)
You may need an appropriate loader to handle this file type.
|   }
| 
|   createSpeech = () => {
|     const defaults = {
|       text: '',

TransformError: [...]: Couldn't find preset "es2015" relative to directory

Maybe you have them globally installed somewhere.

I just did npm install --save react-voice-components and import { VoiceRecognition } from 'react-voice-components'; in my component.

To fix :
npm i -S babel-preset-es2015
npm install -S babel-preset-stage-2

They should be listed as dependencies :)

Project build fails with your module

Hi,
I have fixed the previous issue, it was failing with ES6 syntax, I put it to 5 and works ok.
The problem now is that I'm trying to build my app and I have an error.

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file: 

        ./node_modules/react-voice-components/lib/VoicePlayer.js:3 

I wait for your answer, please answer.

VoiceRecognition.js:50 Uncaught TypeError: Cannot read property 'onResult' of undefined at SpeechRecognition.bindResult (VoiceRecognition.js:50)

Hi!
I'm testing your module in my react app and the problem is that it not catch the onResult prop.
I have to take a look at your example, but it's strange with the storybook.
Can you do one without that? It would be better for the people that are a beginner with React JS
like me...

Here is my code:

import React, { Component } from 'react';
import { VoiceRecognition } from 'react-voice-components';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import micro from '../img/micro_icon.png';
import './css/Micro.css';

class Micro extends Component {

  state = {
    listen: false,
    start: false,
    stop: true
  };

  listen = () => {
    this.setState({ listen: true, start: true, stop: false  })
  }

  onEnd = () => {
    this.setState({ listen: false, start: false, stop: true })
  }

  onResult = ({ finalTranscript }) => {
    const result = finalTranscript
    this.setState({ start: false })

    alert(result)
  }

  render() {
    return (
      <div className="row justify-content-center">
        <div>
          <button>
            {
              this.state.listen
              ?
              <div id="wave">
                <span className="dot"></span>
                <span className="dot"></span>
                <span className="dot"></span>
                <VoiceRecognition
                  onEnd={this.onEnd}
                  onResult={this.onResult}
                  continuous={true}
                  lang="es-ES"
                  stop={this.state.stop}
                />
              </div>
              :
              <img src={micro} onClick={this.listen} className="micro-icon" alt="microphone" />
            }
          </button>
        </div>
      </div>
    );
  }
}

export default Micro;

I wait for your answer. Thaks.

Regards.