Quick Start

Basic Usage

Drop in the script tag or install from npm — both reach the same API:

Browser bundle (CDN)
npm

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.responsivevoice.org/sdk/latest/responsivevoice.js"></script>
  </head>
  <body>
    <button onclick="speak()">Speak</button>

    <script>
      responsiveVoice.init({ apiKey: 'YOUR_API_KEY' });

      function speak() {
        responsiveVoice.speak('Hello from the browser!');
      }
    </script>
  </body>
</html>

npm install @responsivevoice/core
# or: pnpm add @responsivevoice/core  /  yarn add @responsivevoice/core

import { getResponsiveVoice } from '@responsivevoice/core';

const rv = await getResponsiveVoice({ apiKey: 'YOUR_API_KEY' });

rv.speak('Hello, world!');

Voice Selection

// Get available voices
const voices = rv.getVoices();
console.log(voices);

// Speak with a specific voice
rv.speak('Hello', 'UK English Female');
rv.speak('Hello', 'US English Male');
rv.speak('Hallo', 'Deutsch Female');

Playback Control

// Pause speech
rv.pause();

// Resume speech
rv.resume();

// Cancel speech
rv.cancel();

// Check if speaking
if (rv.isPlaying()) {
  console.log('Currently speaking');
}

Events

// Per-call callbacks — bound to this speak() call
rv.speak('Hello with events', 'UK English Female', {
  onstart: () => console.log('Speech started'),
  onend: () => console.log('Speech ended'),
  onerror: (error) => console.error('Speech error:', error),
  onboundary: (charIndex, name) =>
    console.log('Word boundary:', charIndex, name),
});

// Global events — fire across every speak() call (pause/resume live here)
rv.addEventListener('OnPause', () => console.log('Speech paused'));
rv.addEventListener('OnResume', () => console.log('Speech resumed'));