Package Exports
- speech-into-text
- speech-into-text/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (speech-into-text) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
SpeechToText NPM Package
SpeechToText is a lightweight, multi-language voice-to-text conversion package designed for seamless integration into web applications. It supports customization, works with both <textarea>
and <div>
, and can be used via NPM or CDN. Demo
Features
- Multi-Language Support: Recognizes languages like English, Nepali, Spanish, French, and more.
- Customizable Controls: Flexible options to start, stop, clear, and copy text.
- HTML Compatibility: Works with both
<textarea>
and<div>
elements for output. - Lightweight & Flexible: Easy to set up and adapt to your project needs.
- Language Preserve: Selected language remains selected on reload.
- Versatile Button Selectors: Pass selectors like
id
,class
, ortag
for buttons and dropdowns. - Clicky Buttons: CSS is integrated to make buttons visually appealing.
- Listening effect : Add a listening class with CSS animations to the indicator element to visually signal active speech recognition..
Installation
Using NPM
Install the package via NPM:
npm install speech-into-text
Getting Started
HTML Setup
To use SpeechToText, ensure the following elements are in your HTML:
<div>
<!-- Text Output Area -->
<div class="indicator">
<textarea id="outPut" placeholder="Start speaking..." rows="5"></textarea>
</div>
<!-- works with div or any html tag -->
<!-- <div id="outPut"></div> -->
<!-- Control Buttons -->
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button> <!-- Optional -->
<!-- ----Optional Buttons----- -->
<!-- Language Selector -->
<select id="langSelection"></select>
<button id="clearBtn">Clear</button>
<button id="copyBtn">Copy</button>
</div>
Using CDN
Include the package via a CDN if installation is not preferred:
<script type="module" src="script.js"></script>
Setup
import { speechToText } from 'https://unpkg.com/speech-into-text@latest/index.js';
speechToText({
outPut:'#outPut',
startBtn:'#startBtn',
langSelection:'#langSelection'// or for specific langanguage use code like langSelection:"ne-NP"
// other are optional include any of those if required
stopBtn:'#stopBtn',
clearBtn:"#clearBtn",
copyBtn:"#copyBtn",
recIndicator:"#indicator", //optional add css to view change on its class "listening"
});
Using NPM Package
Initialize the speechToText
function with the appropriate selectors:
Setup
import { speechToText } from 'speech-into-text';
speechToText({
outPut:'#outPut',
startBtn:'#startBtn',
langSelection:'#langSelection',// or for specific langanguage use code like langSelection:"ne-NP"
// other are optional include any of those if required
stopBtn:'#stopBtn',
clearBtn:"#clearBtn",
copyBtn:"#copyBtn",
recIndicator:"#indicator", //optional add css to view change on its class "listening"
});
Key Updates
- Stop Button: An optional
stopBtn
parameter to stop speech recognition. - Flexible Selectors: Buttons and dropdowns can use selectors like
id
,class
,tag
, or a combination (e.g.,tag.class
,tag#id
). - Language Selector: Supports dropdown IDs, classes, or a predefined code list.
Supported Languages
The package supports a wide variety of languages. You can pass the dropdown id/class
or directly specify a language code.
Code | Language | Region |
---|---|---|
en-US | English | United States |
ne-NP | Nepali | Nepal |
en-GB | English | United Kingdom |
es-ES | Spanish | Spain |
fr-FR | French | France |
de-DE | German | Germany |
hi-IN | Hindi | India |
ja-JP | Japanese | Japan |
ko-KR | Korean | Korea |
zh-CN | Chinese | China |
pt-PT | Portuguese | Portugal |
ru-RU | Russian | Russia |
ar-SA | Arabic | Saudi Arabia |
it-IT | Italian | Italy |
tr-TR | Turkish | Turkey |
pl-PL | Polish | Poland |
nl-NL | Dutch | Netherlands |
sv-SE | Swedish | Sweden |
da-DK | Danish | Denmark |
cs-CZ | Czech | Czech Republic |
fi-FI | Finnish | Finland |
el-GR | Greek | Greece |
th-TH | Thai | Thailand |
hu-HU | Hungarian | Hungary |
ro-RO | Romanian | Romania |
sk-SK | Slovak | Slovakia |
hr-HR | Croatian | Croatia |
bg-BG | Bulgarian | Bulgaria |
sr-RS | Serbian | Serbia |
vi-VN | Vietnamese | Vietnam |
ms-MY | Malay | Malaysia |
id-ID | Indonesian | Indonesia |
ta-IN | Tamil | India |
ml-IN | Malayalam | India |
Example Usage
- Select a language via dropdown or predefined code.
- Click "Start" to initiate recognition.
- Speak, and transcription appears in
outPut
. - Optionally use "Stop," "Clear," or "Copy" buttons.
Browser Compatibility
This package relies on the SpeechRecognition API, supported in:
- Google Chrome
- Microsoft Edge
- Other Chromium-based browsers
Note: HTTPS is required for this API.
Developed with ❤️ by Darpan Adhikari.
License
This project is licensed under the Apache-2.0 License.
Elevate your web applications with seamless voice-to-text integration! 🚀