https://github.com/morganney/tts-react

Convert text to speech using React.
https://github.com/morganney/tts-react

aws-polly htmlaudioelement react speechsynthesis speechsynthesisutterance text-to-speech

Last synced: 3 months ago
JSON representation

Convert text to speech using React.

• Host: GitHub
• URL: https://github.com/morganney/tts-react
• Owner: morganney
• License: mit
• Created: 2022-09-03T14:27:28.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2025-03-09T20:07:34.000Z (4 months ago)
• Last Synced: 2025-03-29T12:03:31.717Z (3 months ago)
• Topics: aws-polly, htmlaudioelement, react, speechsynthesis, speechsynthesisutterance, text-to-speech
• Language: TypeScript
• Homepage: https://morganney.github.io/tts-react/
• Size: 12.6 MB
• Stars: 61
• Watchers: 4
• Forks: 9
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [`tts-react`](https://www.npmjs.com/package/tts-react)

![CI](https://github.com/morganney/tts-react/actions/workflows/ci.yml/badge.svg)

[![codecov](https://codecov.io/gh/morganney/tts-react/branch/main/graph/badge.svg?token=ZDP1VBC8E1)](https://codecov.io/gh/morganney/tts-react)

[![NPM version](https://img.shields.io/npm/v/tts-react.svg)](https://www.npmjs.com/package/tts-react)



Repository for `tts-react`, a React component and hook that uses the [`SpeechSynthesis`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis) and [`SpeechSynthesisUtterance`](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) API's to convert text to speech. You can fallback to the [`HTMLAudioElement`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) API by providing a `fetchAudioData` prop to the hook or component.

> [!IMPORTANT]  

> Requires a peer dependency of React and ReactDOM >= 19.  

> Use `tts-react@3` if your project is on React 18.

## Install

```console

npm i react react-dom tts-react

```

For projects using React 18:

```console

npm i react@18 react-dom@18 tts-react@3

```

## Table of Contents

* [tts-react](./packages/tts-react)

* [storybook](./packages/story)

* [examples](./docs/examples.md)

## Demo (Storybook)

[morganney.github.io/tts-react](https://morganney.github.io/tts-react/)

## Progress

* Helped fix a `SpeechSynthesisUtterance` default volume [Chrome bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1385117).