google-cloud-text-to-speech

google-cloud-text-to-speech: React JS

A simple Google Cloud Text-to-Speech integration for ReactJS

New Features!

• Enter the text or state defined text gives voice audio of the entered text.
• Supports all voices and languages which avilables in cloud text to speech. (Link)

Tech

• ReactJs - The component integration and run on the web app.

Installation

npm install google-cloud-text-to-speech --save

Demo

Try it on CodeSandbox

Usage

import TextToSpeech from 'google-cloud-text-to-speech';

Example Code

import React from 'react';
import TextToSpeech from 'google-cloud-text-to-speech';

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      text: 'Enter text to convert in to speech',
      voiceList: [
        { name: 'English (US) Male', value: 'en-US-Wavenet-A' },
        { name: 'English (US) Female', value: 'en-US-Wavenet-E' },
      ],
      defaultVoice: 'en-US-Wavenet-E',
      secretKey: '' // get your google cloud access key to text-to-speech
    }
  }

  render() {
    return (<div>
        <TextToSpeech
          text={this.state.text}
          voiceList={this.state.voiceList}
          defaultVoice={this.state.defaultVoice}
          secretKey={this.state.secretKey}
          showAudioControl={false}
          showSettings={false}
          type="Page"
        >
      </TextToSpeech>
    </div>
  );
  }
}

export default App;

Input Parameters

Parameter	Type	Required	Description
text	String	Yes	This is the text that will get converted into Audio
voiceList	Array	No	If not provided then the feature takes up the default array provided
defaultVoice	String	No	If not provided then the feature takes up the default voice provided
secretkey	String	Yes	This is the google cloud key required to call the google cloud API
showAudioControl	Boolean	Yes	Takes 'false' as default , if 'false' then shows only play/pause, if 'true' shows an audio player
type	String	Yes	Takes two values, "Modal" and "Page", "Page" as default, "Page" takes up 50% width while "Modal" takes up 100% width
toolTipName	String	No	Button data-tooltip name
removeToolTip()	Function	No	To perform operations of tooltip remove
stopReadOutPlaying()	Function	no	To manage button play and stop
readOutIconStyle	String	no	To add custome css classes
buttonIcon	String / Icon	yes	Pass button text Play or pass font icon
showSettings	Boolean	Yes	To display custom select voice and adjust voice settings
autoPlay	Boolean	Yes	To autoplay the voice once compoment loads

Adding VoiceList Example

voiceList: [
        { name: 'English (US) Male', value: 'en-US-Wavenet-A' },
        { name: 'English (US) Female', value: 'en-US-Wavenet-E' },
      ]

VoiceList Parameters

Parameter	Type	Required	Description
name	String	Yes	This is the name of the voice that shows up in the options for voices, can be changed as per user wants to display
value	String	Yes	Actual name of voice type which is called in the google cloud, cannot be other than the given voices

Reference

• Google Cloud Text-to-Speech Documentation
• github.com/googleapis/nodejs-text-to-speech

License

MIT