❤
npm
Sign UpSign In

google-cloud-text-to-speech

0.3.2 • Public • Published

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

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i google-cloud-text-to-speech

Repository

github.com/PrazAs/TextToSpeech

Homepage

github.com/PrazAs/TextToSpeech#readme

Weekly Downloads

27

Version

0.3.2

License

MIT

Unpacked Size

44.3 kB

Total Files

10

Last publish

Collaborators

  • krishnam-thinkster
  • aviral-thinkster
  • kiranthinkster
  • pravin-thinkster
Try on RunKit
Report malware