├── .eslintignore ├── .eslintrc ├── .github └── workflows │ └── publish.yml ├── .gitignore ├── .prettierrc.json ├── LICENSE ├── README.md ├── jestconfig.json ├── package-lock.json ├── package.json ├── src ├── __tests__ │ └── index.test.ts ├── assets │ └── logo.png ├── hooks │ ├── index.ts │ ├── useTextToVoice.ts │ └── useVoiceToText.ts └── index.ts └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": [ 4 | "prettier", 5 | "plugin:prettier/recommended", 6 | "eslint:recommended", 7 | "plugin:react/recommended", 8 | "plugin:@typescript-eslint/eslint-recommended", 9 | "plugin:@typescript-eslint/recommended" 10 | ], 11 | "parser": "@typescript-eslint/parser", 12 | "plugins": ["prettier", "@typescript-eslint", "react", "react-hooks"], 13 | "rules": { 14 | "react-hooks/rules-of-hooks": "error", 15 | "react-hooks/exhaustive-deps": "warn", 16 | "@typescript-eslint/no-non-null-assertion": "off", 17 | "@typescript-eslint/ban-ts-comment": "off", 18 | "@typescript-eslint/no-explicit-any": "off" 19 | }, 20 | "settings": { 21 | "react": { 22 | "version": "detect" 23 | } 24 | }, 25 | "env": { 26 | "browser": true, 27 | "node": true 28 | }, 29 | "globals": { 30 | "JSX": true 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | # This is a name of the workflow 2 | name: build 3 | # Controls when the workflow will run 4 | on: 5 | # Triggers the workflow on published releases 6 | release: 7 | types: [published] 8 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 9 | jobs: 10 | # This workflow contains a single job called "build" 11 | build: 12 | # The type of runner that the job will run on 13 | runs-on: ubuntu-latest 14 | # Steps represent a sequence of tasks that will be executed as part of the job 15 | steps: 16 | 17 | - name: Checkout 18 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 19 | uses: actions/checkout@v3 20 | 21 | - name: Setup Node 22 | # Setup node environment 23 | uses: actions/setup-node@v3 24 | with: 25 | # Node version. Run "node -v" to check the latest version 26 | node-version: 21.x 27 | registry-url: https://registry.npmjs.org/ 28 | 29 | - name: Install dependencies 30 | run: yarn && yarn install 31 | 32 | - name: Build 33 | run: yarn build 34 | 35 | - name: Publish 36 | run: yarn publish 37 | 38 | env: 39 | # We need this to our NPM account 40 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | yarn-error.log -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "bracketSpacing": true, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "tabWidth": 2, 6 | "semi": false, 7 | "printWidth": 120, 8 | "jsxSingleQuote": true, 9 | "endOfLine": "auto" 10 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Amin Partovi 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![React SpeakUp: Bringing the power of voice to your React applications with ease.](./src/assets/logo.png) 2 | 3 | # Overview 4 | React SpeakUp is a powerful React package designed to streamline voice interaction within your web applications. Leveraging the Web Speech API, it empowers developers to effortlessly integrate speech recognition and synthesis functionalities into React.js and Next.js projects. 5 | 6 | ### Key Features: 7 | 8 | #### 1. **Voice to Text Conversion:** 9 | 10 | - Effortlessly convert spoken words into text with our intuitive `useVoiceToText` hook. 11 | - Speak with your native language and receive exact results. 12 | 13 | #### 2. **Text to Voice Synthesis:** 14 | 15 | - Transform text content into spoken words using the versatile `useTextToVoice` hook. 16 | - Fine-tune voice characteristics such as pitch, rate, and volume for a personalized experience. 17 | 18 | #### 3. **TypeScript Integration:** 19 | - Seamless integration with TypeScript ensures a robust development experience. 20 | 21 | #### 4. **Easy Integration:** 22 | - Compatible with up to date versions of React.js and Next.js. 23 | 24 | #### 5. **Styling Freedom:** 25 | 26 | - Unrestricted styling possibilities and no limitations on customization. 27 | 28 | 29 | # Getting Started 30 | Install via your favorite package manager 31 | 32 | ### Installation 33 | 34 | npm install react-speakup 35 | or 36 | 37 | yarn add react-speakup 38 | 39 | 40 | ### Usage 41 | Convert voice to text with `useVoiceToText` 42 | 43 | ```jsx 44 | import React from "react"; 45 | import { useVoiceToText } from "react-speakup"; 46 | 47 | const VoiceToTextComponent = () => { 48 | const { startListening, stopListening, transcript, reset } = useVoiceToText(); 49 | 50 | return ( 51 |
52 | 53 | 54 | 55 | {transcript} 56 |
57 | ); 58 | }; 59 | 60 | export default VoiceToTextComponent; 61 | ``` 62 | `useVoiceToText` can take these options 63 | | Properties | Description | Default Value | 64 | |----------|----------|----------| 65 | | lang | the language you are speaking, e.g. "en-US" or "fa-IR" | "en-US" | 66 | | continuous | if its true, it'll stop listening manually, otherwise it stop listening anytime the speech will finished | true | 67 | 68 | 69 | 70 | Convert text to voice with `useTextToVoice` 71 | ```jsx 72 | import React from "react"; 73 | import { useTextToVoice } from "react-speakup"; 74 | 75 | const TextToVoiceComponent = () => { 76 | const { speak, pause, resume, ref, setVoice, voices } = useTextToVoice(); 77 | 78 | return ( 79 |
80 | 81 | 82 | 83 | 92 |
93 |

It's not important which HTML tag your text is within.

94 |
95 | Or

how many levels it is nested.

96 |
97 |
98 |
99 | ); 100 | }; 101 | 102 | export default TextToVoiceComponent; 103 | ``` 104 | `voices` are the list of voices you can use. you can set the voice using `setVoice` callback function. 105 | 106 | `useTextToVoice` can take these options 107 | | Properties | Description | Default Value | 108 | |----------|----------|----------| 109 | | pitch | A float representing the utterance pitch value between 0 (lowest) and 2 (highest) | 1 | 110 | | rate | A float representing the utterance rate value. It can range between 0.1 (lowest) and 10 (highest) | 1 | 111 | | volume | A float that represents the volume value, between 0 (lowest) and 1 (highest) | 1 | 112 | 113 | # Contributing 114 | Contributions are very welcome and wanted. 115 | 116 | ## Keywords 117 | web-speech-api, react-speakup, speech-recognition, speech-synthesis, voice-to-text, text-to-voice, speak -------------------------------------------------------------------------------- /jestconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "transform": { 3 | "^.+\\.(t|j)sx?$": "ts-jest" 4 | }, 5 | "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", 6 | "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"], 7 | "testEnvironment": "jsdom", 8 | "modulePathIgnorePatterns": ["/dist/"] 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-speakup", 3 | "version": "1.1.2", 4 | "description": "a lightweight and easy-to-use React package that enables your application to convert text to speech and speech to text effortlessly.", 5 | "main": "./dist/cjs/index.js", 6 | "module": "./dist/esm/index.js", 7 | "types": "./dist/esm/index.d.ts", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/Amin-Partovi/react-speakup.git" 11 | }, 12 | "scripts": { 13 | "build": "yarn build:esm && yarn build:cjs", 14 | "build:esm": "tsc", 15 | "build:cjs": "tsc --module commonjs --outDir dist/cjs", 16 | "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"", 17 | "prettier": "prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\"", 18 | "prepare": "npm run build", 19 | "prepublishOnly": "npm test && npm run prettier && npm run lint", 20 | "test": "jest --config jestconfig.json" 21 | }, 22 | "keywords": [ 23 | "react", 24 | "react-speakup", 25 | "speech-recognition", 26 | "speech-synthesis", 27 | "voice-to-text", 28 | "text-to-voice", 29 | "speak" 30 | ], 31 | "author": "Amin Partovi", 32 | "license": "ISC", 33 | "devDependencies": { 34 | "@babel/preset-react": "^7.23.3", 35 | "@testing-library/react": "^14.1.2", 36 | "@types/dom-speech-recognition": "^0.0.4", 37 | "@types/jest": "^29.5.11", 38 | "@types/react": "^18.0.12", 39 | "@typescript-eslint/eslint-plugin": "^6.13.2", 40 | "@typescript-eslint/parser": "^6.13.2", 41 | "eslint": "^8.55.0", 42 | "eslint-config-prettier": "^9.1.0", 43 | "eslint-plugin-prettier": "^5.0.1", 44 | "eslint-plugin-react": "^7.33.2", 45 | "eslint-plugin-react-hooks": "^4.6.0", 46 | "jest": "^29.7.0", 47 | "jest-canvas-mock": "^2.5.2", 48 | "jest-environment-jsdom": "^29.7.0", 49 | "prettier": "^3.1.1", 50 | "react": "^18.1.0", 51 | "react-dom": "^18.1.0", 52 | "ts-jest": "^29.1.1", 53 | "typescript": "^4.7.3" 54 | }, 55 | "peerDependencies": { 56 | "react": ">=16" 57 | }, 58 | "files": [ 59 | "dist", 60 | "LICENSE", 61 | "README.md" 62 | ] 63 | } 64 | -------------------------------------------------------------------------------- /src/__tests__/index.test.ts: -------------------------------------------------------------------------------- 1 | import * as hooks from '../index' 2 | 3 | test('useVoiceToText and useTextToVoice are exported', () => { 4 | expect(hooks.useVoiceToText).toBeDefined() 5 | expect(hooks.useTextToVoice).toBeDefined() 6 | }) 7 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Amin-Partovi/react-speakup/34786fe8e4eab7d103981735cab36dafc9eadc68/src/assets/logo.png -------------------------------------------------------------------------------- /src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export { default as useVoiceToText } from './useVoiceToText' 2 | export { default as useTextToVoice } from './useTextToVoice' 3 | -------------------------------------------------------------------------------- /src/hooks/useTextToVoice.ts: -------------------------------------------------------------------------------- 1 | import { useCallback, useEffect, useMemo, useRef, useState } from 'react' 2 | 3 | interface Options { 4 | pitch?: number 5 | rate?: number 6 | volume?: number 7 | } 8 | 9 | enum NODE_TYPE { 10 | ELEMENT = 1, 11 | TEXT = 3, 12 | } 13 | 14 | const useTextToVoice = ({ pitch, rate, volume }: Options = {}) => { 15 | const textContainerRef = useRef(null) 16 | const voiceTranscript = useRef('') 17 | const firstRenderRef = useRef(true) 18 | const [textContent, setTextContent] = useState('') 19 | const [isSpeaking, setIsSpeaking] = useState(false) 20 | const synth = typeof window === 'undefined' ? null : window.speechSynthesis 21 | 22 | const utterThis = useMemo(() => { 23 | if (typeof SpeechSynthesisUtterance === 'undefined') { 24 | return null 25 | } 26 | return new SpeechSynthesisUtterance(textContent) 27 | }, [textContent]) 28 | 29 | const extractText = useCallback((element: Element | ChildNode | null) => { 30 | if (!element) return 31 | // Check if the element has child nodes 32 | if (element.childNodes.length > 0) { 33 | // Loop through the child nodes 34 | element.childNodes.forEach((child) => { 35 | if (child.nodeType === NODE_TYPE.TEXT) { 36 | // If it's a text node (nodeType 3), add its text content to the result 37 | voiceTranscript.current += child.textContent 38 | } else if (child.nodeType === NODE_TYPE.ELEMENT) { 39 | // If it's an element node (nodeType 1), recursively call the function 40 | extractText(child) 41 | } 42 | }) 43 | } 44 | }, []) 45 | 46 | if (utterThis) { 47 | utterThis.onerror = (event) => { 48 | console.log(`An error has occurred with the speech synthesis: ${event.error}`) 49 | } 50 | 51 | utterThis.onend = () => { 52 | setIsSpeaking(false) 53 | } 54 | } 55 | 56 | // get voices Web Speech API provided 57 | const voices = useMemo(() => synth?.getVoices() ?? [], [synth]) 58 | const voiceNames = useMemo(() => voices.map((voice) => voice.name), [voices]) 59 | 60 | useEffect(() => { 61 | if (firstRenderRef.current && textContainerRef) { 62 | const voiceContainer = textContainerRef.current 63 | firstRenderRef.current = false 64 | extractText(voiceContainer) 65 | } 66 | setTextContent(voiceTranscript.current) 67 | }, [extractText, textContainerRef]) 68 | 69 | useEffect(() => { 70 | if (pitch && utterThis) { 71 | utterThis.pitch = pitch 72 | } 73 | if (volume && utterThis) { 74 | utterThis.volume = volume 75 | } 76 | if (rate && utterThis) { 77 | utterThis.rate = rate 78 | } 79 | }, [utterThis, pitch, volume, rate]) 80 | 81 | function speak() { 82 | if (synth && utterThis) { 83 | synth.speak(utterThis) 84 | setIsSpeaking(true) 85 | } 86 | } 87 | 88 | function pause() { 89 | if (synth) { 90 | synth.pause() 91 | setIsSpeaking(false) 92 | } 93 | } 94 | 95 | function resume() { 96 | if (synth) { 97 | synth.resume() 98 | setIsSpeaking(true) 99 | } 100 | } 101 | 102 | function setVoice(voiceName: string) { 103 | // find selected voice by its name 104 | if (utterThis) utterThis.voice = voices.find((item) => item.name === voiceName) as SpeechSynthesisVoice 105 | } 106 | 107 | return { 108 | speak, 109 | pause, 110 | resume, 111 | voices: voiceNames, 112 | setVoice, 113 | ref: textContainerRef, 114 | utterance: utterThis, 115 | isSpeaking, 116 | } 117 | } 118 | 119 | export default useTextToVoice 120 | -------------------------------------------------------------------------------- /src/hooks/useVoiceToText.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useMemo, useRef, useState } from 'react' 2 | 3 | interface Options { 4 | lang?: string 5 | continuous?: boolean 6 | } 7 | 8 | const useVoiceToText = ({ lang, continuous }: Options = { lang: 'en-US', continuous: true }) => { 9 | const [transcript, setTranscript] = useState('') 10 | const isContinuous = useRef(continuous ?? true) 11 | 12 | const SpeechRecognition = useMemo(() => { 13 | if (typeof window === 'undefined') { 14 | return null 15 | } 16 | return window.SpeechRecognition || window.webkitSpeechRecognition 17 | }, []) 18 | 19 | const recognition = useMemo(() => { 20 | if (SpeechRecognition) return new SpeechRecognition() 21 | else return null 22 | }, [SpeechRecognition]) 23 | 24 | useEffect(() => { 25 | if (lang && recognition) { 26 | recognition.lang = lang 27 | } 28 | }, [lang, recognition]) 29 | 30 | function startListening() { 31 | if (!recognition) return 32 | recognition.start() 33 | if (continuous) { 34 | isContinuous.current = true 35 | } 36 | } 37 | 38 | function stopListening() { 39 | if (!recognition) return 40 | recognition.stop() 41 | isContinuous.current = false 42 | } 43 | 44 | function reset() { 45 | setTranscript('') 46 | } 47 | 48 | if (recognition) { 49 | recognition.onend = () => { 50 | if (isContinuous.current) { 51 | // if the listening is continuous, it starts listening even the speaker is quiet till it will be stopped manually 52 | startListening() 53 | } 54 | } 55 | recognition.onerror = (event: SpeechRecognitionErrorEvent) => { 56 | console.error(`Speech recognition error detected: ${event.error}`) 57 | } 58 | 59 | recognition.onresult = (event: SpeechRecognitionEvent) => { 60 | setTranscript((prevTranscript) => prevTranscript + ' ' + event.results[0][0].transcript) 61 | } 62 | } 63 | return { startListening, stopListening, transcript, reset } 64 | } 65 | export default useVoiceToText 66 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export { useVoiceToText, useTextToVoice } from './hooks' 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src"], 3 | "exclude": ["dist", "node_modules"], 4 | "compilerOptions": { 5 | "module": "esnext", 6 | "lib": ["dom", "esnext"], 7 | "importHelpers": true, 8 | "declaration": true, 9 | "sourceMap": false, 10 | "declarationMap": false, 11 | "rootDir": "./src", 12 | "outDir": "./dist/esm", 13 | "strict": true, 14 | "noImplicitReturns": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": true, 18 | "moduleResolution": "node", 19 | "jsx": "react", 20 | "esModuleInterop": true, 21 | "skipLibCheck": true, 22 | "forceConsistentCasingInFileNames": true, 23 | "allowJs": true 24 | } 25 | } 26 | --------------------------------------------------------------------------------