{"id":37133737,"url":"https://github.com/mikeyparton/react-speech-kit","last_synced_at":"2026-01-14T15:36:38.313Z","repository":{"id":37913343,"uuid":"174019269","full_name":"MikeyParton/react-speech-kit","owner":"MikeyParton","description":"React hooks for Speech Recognition and Speech Synthesis","archived":false,"fork":false,"pushed_at":"2023-07-01T16:22:54.000Z","size":1007,"stargazers_count":242,"open_issues_count":47,"forks_count":66,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-01T16:19:31.746Z","etag":null,"topics":["react","speech-recognition","speech-synthesis","speech-to-text"],"latest_commit_sha":null,"homepage":"https://mikeyparton.github.io/react-speech-kit","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MikeyParton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-03-05T20:55:24.000Z","updated_at":"2025-05-13T14:29:02.000Z","dependencies_parsed_at":"2024-01-07T11:11:33.425Z","dependency_job_id":"51107ead-d41c-478a-86d0-6ff02269705f","html_url":"https://github.com/MikeyParton/react-speech-kit","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/MikeyParton/react-speech-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeyParton%2Freact-speech-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeyParton%2Freact-speech-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeyParton%2Freact-speech-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeyParton%2Freact-speech-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MikeyParton","download_url":"https://codeload.github.com/MikeyParton/react-speech-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeyParton%2Freact-speech-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28424374,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T13:30:50.153Z","status":"ssl_error","status_checked_at":"2026-01-14T13:29:08.907Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","speech-recognition","speech-synthesis","speech-to-text"],"created_at":"2026-01-14T15:36:37.828Z","updated_at":"2026-01-14T15:36:38.300Z","avatar_url":"https://github.com/MikeyParton.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-speech-kit 🎤\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;[![CircleCI](https://circleci.com/gh/MikeyParton/react-speech-kit/tree/master.svg?style=shield)](https://circleci.com/gh/MikeyParton/react-speech-kit/tree/master) [![codecov](https://codecov.io/gh/MikeyParton/react-speech-kit/branch/master/graph/badge.svg)](https://codecov.io/gh/MikeyParton/react-speech-kit)\n\nReact hooks for in-browser Speech Recognition and Speech Synthesis.\n[Demo here](https://mikeyparton.github.io/react-speech-kit/)\n\n## Table of Contents\n\n- [Install](#install)\n- [Examples and Demo](#examples-and-demo)\n- [useSpeechSynthesis](#usespeechsynthesis)\n  - [Usage](#usage)\n  - [Args](#args)\n  - [Returns](#returns)\n- [useSpeechRecognition](#usespeechrecognition)\n  - [Usage](#usage-1)\n  - [Args](#args-1)\n  - [Returns](#returns-1)\n\n## Install\n\n```bash\nyarn add react-speech-kit\n```\n\n## Examples and Demo\n\nA full example can be found [here](https://mikeyparton.github.io/react-speech-kit/). The source code is in the [examples directory](https://github.com/MikeyParton/react-speech-kit/tree/master/examples/src).\n\n## useSpeechSynthesis\n\nA react hook for the browser's [SpeechSynthesis API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis). It exposes the options and controls to the underlying SpeechSynthesis in the browser.\n\n### Usage\n\n```jsx\nimport React, { useState } from 'react';\nimport { useSpeechSynthesis } from 'react-speech-kit';\n\nfunction Example() {\n  const [value, setValue] = useState('');\n  const { speak } = useSpeechSynthesis();\n\n  return (\n    \u003cdiv\u003e\n      \u003ctextarea\n        value={value}\n        onChange={(event) =\u003e setValue(event.target.value)}\n      /\u003e\n      \u003cbutton onClick={() =\u003e speak({ text: value })}\u003eSpeak\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Args\n\n#### onEnd\n\n`function()` _optional_\n\nCalled when SpeechSynthesis finishes reading the text or is cancelled. It is called with no argumnents. Very useful for triggering a state change after something has been read.\n\n### Returns\n\nuseSpeechSynthesis returns an object which contains the following:\n\n#### speak\n\n`function({ text: string, voice: SpeechSynthesisVoice })`\n\nCall to make the browser read some text. You can change the voice by passing an available SpeechSynthesisVoice (from the voices array). Note that some browsers require a direct user action initiate SpeechSynthesis. To make sure it works, it is recommended that you call speak for the first time in a click event handler.\n\n#### cancel\n\n`function()`\n\nCall to make SpeechSynthesis stop reading.\n\n#### speaking\n\n`boolean`\n\nTrue when SpeechSynthesis is actively speaking.\n\n#### supported\n\n`boolean`\n\nWill be true if the browser supports SpeechSynthesis. Keep this in mind and use this as a guard before rendering any control that allow a user to call speak.\n\n#### voices\n\n`[SpeechSynthesisVoice]`\n\nAn array of available voices which can be passed to the speak function. An example SpeechSynthesisVoice voice has the following properties.\n\n```\n{\n  default: true\n  lang: \"en-AU\"\n  localService: true\n  name: \"Karen\"\n  voiceURI: \"Karen\"\n}\n```\n\nIn some browsers voices load asynchronously. In these cases, the array will be empty until they are available.\n\n## useSpeechRecognition\n\nA react hook for the browser's [SpeechRecognition API](https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition).\n\n### Usage\n\n```jsx\nimport React, { useState } from 'react';\nimport { useSpeechRecognition } from 'react-speech-kit';\n\nfunction Example() {\n  const [value, setValue] = useState('');\n  const { listen, listening, stop } = useSpeechRecognition({\n    onResult: (result) =\u003e {\n      setValue(result);\n    },\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003ctextarea\n        value={value}\n        onChange={(event) =\u003e setValue(event.target.value)}\n      /\u003e\n      \u003cbutton onMouseDown={listen} onMouseUp={stop}\u003e\n        🎤\n      \u003c/button\u003e\n      {listening \u0026\u0026 \u003cdiv\u003eGo ahead I'm listening\u003c/div\u003e}\n    \u003c/div\u003e\n  );\n}\n```\n\n### Args\n\n#### onEnd\n\n`function()`\n\nCalled when SpeechRecognition stops listening.\n\n#### onResult\n\n`function(string)`\n\nCalled when SpeechRecognition has a result. It is called with a string containing a transcript of the recognized speech.\n\n### Returns\n\nuseSpeechRecognition returns an object which contains the following:\n\n#### listen\n\n`function({ interimResults: boolean, lang: string })`\n\nCall to make the browser start listening for input. Every time it processes a result, it will forward a transcript to the provided onResult function. You can modify behavior by passing the following arguments:\n\n- **lang**  \n   `string`  \n   The language the SpeechRecognition will try to interpret the input in. Use the languageCode from this list of languages that Chrome supports ([here](https://cloud.google.com/speech-to-text/docs/languages)) e.g: \"en-AU\". If not specified, this defaults to the HTML lang attribute value, or the user agent's language setting if that isn't set either.\n\n- **interimResults**  \n   `boolean` _(default: true)_  \n   SpeechRecognition can provide realtime results as it's trying to figure out the best match for the input. Set to false if you only want the final result.\n\n#### stop\n\n`function()`\n\nCall to make SpeechRecognition stop listening. This will call the provided onEnd function as well.\n\n#### listening\n\n`boolean`\n\nTrue when SpeechRecognition is actively listening.\n\n#### supported\n\n`boolean`\n\nWill be true if the browser supports SpeechRecognition. Keep this in mind and use this as a guard before rendering any control that allow a user to call listen.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikeyparton%2Freact-speech-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikeyparton%2Freact-speech-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikeyparton%2Freact-speech-kit/lists"}