ASR for multiple languages in angular demo

hello

Thank you for sharing your knowledge

I want to use multiple languages in the Angular program demo.

For this purpose, I changed the following code in app.component.ts :

import { Component } from '@angular/core';
import { ElementRef, ViewChild} from '@angular/core'
import { DictateService } from "./dictate-service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [DictateService]
})

export class AppComponent {

  @ViewChild('results') private results: ElementRef;

  buttonText = 'شروع ضبط';
  buttonText_russian = 'شروع ضبط';
  textDataBase = '';
  textData = '';

  persian_server = "ws://localhost:2700";

  russian_server = "ws://localhost:2701";

  constructor(private dictateService: DictateService) {
    
  }

  switchSpeechRecognition() {
    if ( !this.dictateService.isInitialized() || this.persian_server === null ) {
      this.persian_server = "ws://localhost:2700";
      this.russian_server = null ;

      this.dictateService.cancel();

      this.dictateService.init({
        server: this.persian_server,
        onResults: (hyp) => {
          console.log(hyp);
  
          this.textDataBase = this.textDataBase + hyp + '\n';
          this.textData = this.textDataBase;
          this.results.nativeElement.scrollTop = this.results.nativeElement.scrollHeight;
        },
        onPartialResults: (hyp) => {
          console.log(hyp);
  
          this.textData = this.textDataBase + hyp;
        },
        onError: (code, data) => {
          console.log(code, data);
        },
        onEvent: (code, data) => {
          console.log(code, data);
        }
      });

      this.buttonText_russian = 'شروع ضبط';
      document.getElementById("listening_gif").style.display = "none";

      this.buttonText = 'پایان ضبط';
      document.getElementById("listening_gif").style.display = "inline";
    } else if (this.dictateService.isRunning()) {
      this.dictateService.resume();
      this.buttonText = 'پایان ضبط';
      document.getElementById("listening_gif").style.display = "inline";
    } else {
      this.dictateService.pause();
      this.buttonText = 'شروع ضبط';
      document.getElementById("listening_gif").style.display = "none";
    }
  }

  cleararea() {
    var cl = document.getElementById("textarea") ;
    console.log(cl);
    cl.value = "";
    this.textDataBase = '';
  }

  switchSpeechRecognition_russian() {
    if ( !this.dictateService.isInitialized() || this.russian_server === null ) {
      this.persian_server = null;
      this.russian_server = "ws://localhost:2701" ;

      this.dictateService.cancel();

      this.buttonText = 'شروع ضبط';
      document.getElementById("listening_gif").style.display = "none";

      this.dictateService.init({
        server: this.russian_server,
        onResults: (hyp) => {
          console.log(hyp);
  
          this.textDataBase = this.textDataBase + hyp + '\n';
          this.textData = this.textDataBase;
          this.results.nativeElement.scrollTop = this.results.nativeElement.scrollHeight;
        },
        onPartialResults: (hyp) => {
          console.log(hyp);
  
          this.textData = this.textDataBase + hyp;
        },
        onError: (code, data) => {
          console.log(code, data);
        },
        onEvent: (code, data) => {
          console.log(code, data);
        }
      });

      this.buttonText_russian = 'پایان ضبط';
      document.getElementById("listening_gif").style.display = "inline";
    } else if (this.dictateService.isRunning()) {
      this.dictateService.resume();
      this.buttonText_russian = 'پایان ضبط';
      document.getElementById("listening_gif").style.display = "inline";
    } else {
      this.dictateService.pause();
      this.buttonText_russian = 'شروع ضبط';
      document.getElementById("listening_gif").style.display = "none";
    }
  }

}

The correct results are displayed for the first time, but when I select another language, the results are no longer correct.

I think the error is in following code , but I do not know how to correct it

node.onaudioprocess = (e) => {
      if (this.paused) return;

      // console.log("00000000000000000000000000000000000000000000000");
      // console.log(e.inputBuffer.getChannelData(0));
      // console.log("00000000000000000000000000000000000000000000000");

      this.worker.postMessage({
        command: 'record',
        buffer: [
          e.inputBuffer.getChannelData(0)
        ]
      });
    };

please help.

[nshmyrev]

No the problem is not in the code,

Again, the problem is in your code, our code doesn’t have this feature at all

it sends 1024 array in 500 sec interval which results in a buffer size 44k ( a record request is sent every ~10-12 ms)

Most likely you subscribe to audio stream twice (like you call startUserMedia several times) so you get each audio chunk many times. You shouldn’t do that when you switch languages.

[NadaAzzzam]

It works very good when i call startUserMedia once… thank you very much