speech-into-text

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, or tag 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

1. Stop Button: An optional stopBtn parameter to stop speech recognition.
2. Flexible Selectors: Buttons and dropdowns can use selectors like id, class, tag, or a combination (e.g., tag.class, tag#id).
3. 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

1. Select a language via dropdown or predefined code.
2. Click "Start" to initiate recognition.
3. Speak, and transcription appears in outPut.
4. 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! 🚀