# speech2text

**speech2text** is a client plugin which using [WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) to communicate with [Google Cloud Speech API](https://cloud.google.com/speech-to-text/) backend. Result of successful connection is Speech to Text response to client frontend. Custom backend on WebSocket protocol is required.

## installation

```javascript
npm install @comsultia/speech2text
```

## usage

In gulpfile.js add build.js to your array of JS files (or whatever you like):

```javascript
const jsFiles = [
  './node_modules/@comsultia/speech2text/dist/bundle.js',
  './public/src/js/custom.js'
];
```
*example available in 'node_modules/@comsultia/speech2text/gulpfile.js'*

In your html add build of js files and initialize speech2text plugin

```html
<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Google Speech To Text</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <script src="./public/js/complete.min.js"></script>
</head>
<body>

  <main>
    <h1>WebSocket Google Speech To Text</h1>
    <div class="recorder">
      <div class="recorder-buttons">
        <button id="btn-start-recording" class="btn-start-recording">Start</button>
        <button id="btn-stop-recording" class="btn-stop-recording" disabled>Stop</button>
      </div>
      <div id="result-wrapper" class="result-wrapper">
        <div class="loading-holder"></div>
        <h2>Result:</h2>
        <div id="result" class="result"></div>
      </div>
    </div>
  </main>

  <script>
    let loadingHolder = document.querySelector('.loading-holder');

    // init Speech to Text plugin
    speech2text.init({
      debug: true, // true if devel mode
      url: 'wss://xx.dev.domain.sk:{PORT}/nodejs/',
      elementStart: '#btn-start-recording',
      elementStop: '#btn-stop-recording',
      elementResult: '#result',
      defaultTimeout: 3000,
      onConnecting: function() {
        console.log('waiting for websocket connection....');
      },
      onConnection: function() {
        console.log('websocket connected....');
      },
      onNotSupported: function() {
        console.log('web audio not supported');
      },
      onStart: function() {
        loadingHolder.classList.add('speech-loading');
      },
      onBlock: function() {
        console.log('microphone blocked');
      },
      onError: function() {
        console.log('websocket connection error');
      },
      onEnd: function() {
        loadingHolder.classList.remove('speech-loading');
      }
    });
  </script>

</body>
</html>
```
*example available in 'node_modules/@comsultia/speech2text/index.html'*

## parameters

**debug**: true || false (required)

**url**: url to your WebSocket backend (required)

**elementStart**: querySelector of recording start button element (required)

**elementStop**: querySelector of recording stop button element (required)

**elementResult**: querySelector of result holder element (required)

**defaultTimeout**: number of miliseconds for waiting on last word to stop, 4000ms is default value (optional)

**onConnecting**: callback on starting connecting with WebSocket (optional)

**onConnection**: callback on successfull connection with WebSocket (optional)

**onNotSupported**: callback on web audio not supported in selected browser (optional)

**onStart**: callback on start of recording (optional)

**onBlock**: callback on microphone block (optional)

**onError**: callback on error connecting with WebSocket (optional)

**onEnd**: callback on close WebSocket and end of recording (optional)

## demo

availbale in *'node_modules/@comsultia/speech2text'*

open *'index.html'* in your browser and check browser console with all events logs (don't forget to change url of your websocket backend)