tts-pipeline

tts-pipeline is a package designed to take text input from user's and other info's like model,gender,speaker etc , chunk the text into specified length (based on punctuation), and send those text chunks to a remote server. The it listens on events to receive audio from server and plays the audio.

Installation

Install the package using npm:

npm install tts-pipeline

Usage

Importing the Package

import { playAudio, stopAudio } from "tts_pipeline";

Functions

playAudio(textBoxRef, eventEmitter, socketUrl, model, gender, speakerId)

Takes textbox ref and then process it's content and send those to server for trancription and finally plays the audio after receiving from server

Parameters:

• textBoxRef (object): A reference to a textbox element where user puts their text.
• eventEmitter(Event): An Event to get the event when audio context finishes playing all the audios.
• socketUrl (string): The URL of the remote server to which text chunks will be sent.
• model(string): The model name which the user want to use.
• gender (string): The gender of which voice the user want to get, male/female
• speakerId (string): After selecting the gender user also can choose their speaker, male speaker id list - 1,2, female speaker id list - 0,1

stopAudio()

It stops playing the audios.

Example

import { Box, Button, TextField } from "@mui/material";
import EventEmitter from "events";
import { useEffect, useRef, useState } from "react";
import { playAudio, stopAudio } from "tts_pipeline";

function App() {
  const eventEmitter = new EventEmitter();
  const [isPlaying, setIsPlaying] = useState(false);
  const textBoxRef = useRef();
  useEffect(() => {
    eventEmitter.on("playEnded", () => {
      setIsPlaying(false);
    });
  }, []);

  const handlePlayPause = (str) => {
    if (str === "pause") {
      setIsPlaying(false);
      stopAudio();
    } else {
      setIsPlaying(true);
      playAudio(
        textBoxRef,
        eventEmitter,
        your_socket_url,
        model,
        gender,
        speakerID
      );
    }
  };

  return (
    <div className="App" style={{ marginTop: "50px" }}>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          alignContent: "center",
          alignItems: "center",
          justifyContent: "center",
          gap: 2,
          maxWidth: "50vw",
          mx: "auto",
        }}
      >
        <TextField
          inputRef={textBoxRef}
          id="outlined-multiline-flexible"
          multiline
          fullWidth
          minRows={5}
        />{" "}
        {isPlaying ? (
          <Button
            variant="contained"
            onClick={() => {
              handlePlayPause("pause");
            }}
            style={{ backgroundColor: "red" }}
          >
            pause
          </Button>
        ) : (
          <Button variant="contained" onClick={() => handlePlayPause("play")}>
            {" "}
            play{" "}
          </Button>
        )}
      </Box>
    </div>
  );
}

export default App;