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