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! 🚀