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:

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:

  startSpeechButton.addEventListener('click', () => {
      recognition.lang = selectedValue || 'en-US';
      recognition.start();
  });

  Initiates the speech recognition process in the selected language.

• Stop Speech:

  stopSpeechButton.addEventListener('click', () => {
      recognition.stop();
  });

  Stops the speech recognition.

• Generate Word Document:

  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.

  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.

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.