DEV Community

Khushi Nakra
Khushi Nakra

Posted on

How to Generate Speech from Text in JavaScript

#javascript #web #audio #tutorial

Text-to-Speech (TTS) allows applications to produce spoken audio from text. Whether you're building a reader, an assistant, or adding simple voice output, the Orca Text-to-Speech Web SDK makes it possible to generate speech directly in the browser. This guide walks through the minimal setup needed to get it running.

What You'll Build

A minimal JavaScript setup that:

  • Installs the Orca Text-to-Speech Web SDK
  • Loads an Orca model file
  • Creates an OrcaWorker instance
  • Calls synthesize() to generate raw PCM audio from text

You can use this as a foundation for any audio playback tools.

1. Install the Orca Web SDK 

npm install @picovoice/orca-web
Enter fullscreen mode Exit fullscreen mode

2. Get Your Picovoice AccessKey

Log in to (or sign up for) the Picovoice Console. It is free and no credit card is required. Copy your AccessKey to the clipboard — you'll use it when initializing the SDK.

3. Add the Orca Model File

Download the Orca Text-to-Speech model for the voice you prefer and add it to your project in one of two ways.

Option A: Copy the Model to a Public Directory 

cp ${ORCA_PARAMS_PATH} ${PUBLIC_DIRECTORY}/${ORCA_PARAMS}
Enter fullscreen mode Exit fullscreen mode

Option B: Convert the Model to Base64

Use the pvbase64 script included in the package:

npx pvbase64 -i ${ORCA_PARAMS_PATH} -o ${OUTPUT_DIRECTORY}/${MODEL_NAME}.js
Enter fullscreen mode Exit fullscreen mode

Then create an object containing the Orca model options:

import base64model from '${OUTPUT_DIRECTORY}/${MODEL_NAME}.js'

const orcaModel = {
  publicPath: '${PUBLIC_DIRECTORY}/${ORCA_PARAMS}',

  // or

  base64: base64model,
}
Enter fullscreen mode Exit fullscreen mode

4. Initialize Orca in JavaScript 

import { OrcaWorker } from "@picovoice/orca-web";

const orca = await OrcaWorker.create(
  "${ACCESS_KEY}",
  orcaModel
);
Enter fullscreen mode Exit fullscreen mode

5. Convert Text to Speech 

// returns raw PCM
const pcm = await orca.synthesize("${TEXT}");
Enter fullscreen mode Exit fullscreen mode

When you're done using Orca, release resources explicitly:

await orca.release();
Enter fullscreen mode Exit fullscreen mode

Explore Further

The Orca Text-to-Speech Web SDK is open source and available on GitHub. There is also an open-source text-to-speech web demo built with Orca that you can reference or extend.

This tutorial was originally published on Picovoice.

Top comments (0)