Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/asutar/voicetotextconversion
Voice-to-Text ASP.NET MVC Application (Framework 4.6)
https://github.com/asutar/voicetotextconversion
javascript jquery mvc voice-recognition voicetotext
Last synced: about 2 months ago
JSON representation
Voice-to-Text ASP.NET MVC Application (Framework 4.6)
- Host: GitHub
- URL: https://github.com/asutar/voicetotextconversion
- Owner: asutar
- Created: 2024-09-18T08:04:33.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-09-18T08:12:19.000Z (5 months ago)
- Last Synced: 2024-12-18T20:15:47.798Z (about 2 months ago)
- Topics: javascript, jquery, mvc, voice-recognition, voicetotext
- Language: JavaScript
- Homepage:
- Size: 32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Voice-to-Text ASP.NET MVC Application (Framework 4.6) Documentation
#### 1. **Introduction**
This ASP.NET MVC application allows users to convert speech to text using the browser’s speech recognition feature. It is built with .NET Framework 4.6 and uses JavaScript for handling speech recognition and voice-to-text conversion. The application also provides options for selecting the input language, playing, pausing, resetting, and saving the recognized text as a Word document.
#### 2. **Key Features**
- **Real-time Speech Recognition**: Converts speech to text in real-time using the browser’s `webkitSpeechRecognition`.
- **Multilingual Support**: Allows users to choose from different languages like English, Hindi, Marathi, and Gujarati.
- **Caret Position Tracking**: Inserts recognized speech at the current caret position within the text box.
- **Pause and Resume**: Users can pause and resume speech recognition without losing the current state.
- **Document Export**: Users can save the converted text as a Word document.
- **Reset Functionality**: Resets the text area and re-enables the microphone.
#### 3. **Technologies Used**
- **ASP.NET MVC 4.6**
- **JavaScript and jQuery**
- **Bootstrap 5.3.3** for styling
- **Font Awesome 6.5.0** for icons
- **FileSaver.js** for generating Word files
#### 4. **Code Overview**
##### 4.1. **HTML Structure**
The form includes a text area for the output of the voice-to-text conversion, buttons for controlling the speech recognition, and a dropdown for selecting the language.
- **Text Area (`#output`)**: Displays the converted text.
- **Language Dropdown (`#ddlLanguage`)**: Allows users to select the language for speech recognition.
- **Buttons**:
- `#startSpeech`: Starts speech recognition.
- `#stopSpeech`: Stops speech recognition.
- `#Reset`: Resets the text area.
- `#generateDoc`: Saves the content as a Word document.
- `#playPauseBtn`: Pauses and resumes speech recognition.
##### 4.2. **CSS Styling**
Custom styling ensures the layout is clean:
- `#div_start`: Positions the microphone button.
- `#output`: Styles the text area where recognized speech is displayed.
- `#info`: Displays instructions to the user.
##### 4.3. **JavaScript Functionality**
The JavaScript code is responsible for handling the speech-to-text conversion, controlling speech recognition, caret position tracking, and file generation.
###### Speech Recognition Setup:
```javascript
let recognition = new webkitSpeechRecognition();
recognition.continuous = true;
```
- `webkitSpeechRecognition` is the browser API that converts speech into text.
- The recognition process is continuous, meaning it will keep listening until explicitly stopped.
###### Speech Recognition Events:
- **onstart**: Triggered when speech recognition starts. Disables the `#startSpeech` button and changes the play button icon.
- **onresult**: Receives the recognized text and inserts it into the text area at the current caret position.
- **onerror**: Displays any errors encountered during the speech recognition process.
- **onend**: Triggered when speech recognition stops, re-enabling the start button.
###### Button Event Handlers:
- **Start Speech**:
```javascript
startSpeechButton.addEventListener('click', () => {
recognition.lang = selectedValue || 'en-US';
recognition.start();
});
```
Initiates the speech recognition process in the selected language.
- **Stop Speech**:
```javascript
stopSpeechButton.addEventListener('click', () => {
recognition.stop();
});
```
Stops the speech recognition.
- **Generate Word Document**:
```javascript
document.getElementById('generateDoc').addEventListener('click', () => {
const text = document.getElementById('output').value;
const blob = new Blob(['\ufeff' + text], {
type: 'application/msword'
});
saveAs(blob, 'speech_text.doc');
});
```
Converts the text to a Word document using `FileSaver.js`.
###### Caret Position Tracking:
- The caret position in the text area is tracked to ensure the recognized text is inserted correctly.
```javascript
function trackCaretPosition() {
const output = document.getElementById('output');
caretPosition = output.selectionStart;
}
```
#### 5. **Dropdown Language Selection**
The dropdown allows users to change the language for speech recognition.
```javascript
document.getElementById('ddlLanguage').addEventListener('change', handleDropdownChange);
```
- When the language is changed, it is stored in the `selectedValue` variable and the text area is cleared.
#### 6. **Conclusion**
This ASP.NET MVC application provides an intuitive interface for converting speech to text. By leveraging browser capabilities and simple JavaScript, the application allows users to convert their speech into text, customize the language, and export their text as a document.