Chrome browser Web Speech API SpeechRecognition() only understands English (implementation of `lang` property)

Question

My implementation of Web Speech API SpeechRecognition() in Chrome works great when I'm speaking English but in other languages it often returns English words. Did I implement this.recognition.lang incorrectly? The documentation gives only a basic example.

Does this.recognition.lang belong in init() or in start()? Maybe I'm initializing SpeechRecognition() with English (the default) and the failing to tell it when the user switches to another language?

init() {
    this.recognition.interimResults = true;
    switch (this.language2!.short) {
      case 'en':
        this.recognition.lang = 'en-US';
        break;
      case 'es':
        this.recognition.lang = 'es-ES';
        break;
      case 'fr':
        this.recognition.lang = 'fr-FR';
        break;
      case 'de':
        this.recognition.lang = 'de-DE';
        break;
      case 'it':
        this.recognition.lang = 'it-IT';
        break;
      case 'pt':
        this.recognition.lang = 'pt-PT';
        break;
      case 'ru':
        this.recognition.lang = 'ru-RU';
        break;
      case 'zh':
        this.recognition.lang = 'zh-CN';
        break;
      case 'fi':
        this.recognition.lang = 'fi-FI';
        break;
      default:
        this.recognition.lang = 'en-US';
        break;
    }
    this.recognition.continuous = false;
    this.recognition.addEventListener('result', (e: any) => {
      const transcript = Array.from(e.results)
        .map((result: any) => result[0])
        .map((result) => result.transcript)
        .join('');
      this.tempWords = transcript;
      this.speechRecognitionWait = false;
    });
  }

  start() {
    try {
      this.recognition.start();
      this.speechRecognitionStart = true;
      this.isStoppedSpeechRecog = false;
      this.speechRecognitionWait = true;
    } catch (error) { // doesn't prevent error "Failed to execute 'start' on 'SpeechRecognition': recognition has already started"
      this.recognition.stop();
      console.error(error);
    }
  }

Answer 1

I wrote a few logs and, indeed, I was initializing SpeechRecognition() with English and switching my app to another language didn't switch the SpeechRecognition() language. This code works much better.

init() {
    this.recognition.interimResults = true;
    this.recognition.continuous = false;
    this.recognition.addEventListener('result', (e: any) => {
      const transcript = Array.from(e.results)
        .map((result: any) => result[0])
        .map((result) => result.transcript)
        .join('');
      this.tempWords = transcript;
      this.speechRecognitionWait = false;
    });
  }

  start() {
    try {
      switch (this.language2!.short) {
        case 'en':
          this.recognition.lang = 'en-US';
          break;
        case 'es':
          this.recognition.lang = 'es-ES';
          break;
        case 'fr':
          this.recognition.lang = 'fr-FR';
          break;
        case 'de':
          this.recognition.lang = 'de-DE';
          break;
        case 'it':
          this.recognition.lang = 'it-IT';
          break;
        case 'pt':
          this.recognition.lang = 'pt-PT';
          break;
        case 'ru':
          this.recognition.lang = 'ru-RU';
          break;
        case 'zh':
          this.recognition.lang = 'zh-CN';
          break;
        case 'fi':
          this.recognition.lang = 'fi-FI';
          break;
        default:
          this.recognition.lang = 'en-US';
          break;
      }
      this.recognition.start();
      this.speechRecognitionStart = true;
      this.isStoppedSpeechRecog = false;
      this.speechRecognitionWait = true;
    } catch (error) {
      this.recognition.stop();
      console.error(error);
    }
  }