Chrome中Web Speech API SpeechRecognition多语言识别异常及lang配置疑问

我在Chrome浏览器中实现的Web Speech API SpeechRecognition识别英语时表现正常，但切换其他语言时经常返回英文结果。怀疑是this.recognition.lang的实现存在问题，官方文档仅提供基础示例，想确认：

• this.recognition.lang应该放在init()方法中还是start()方法中？
• 是否是初始化时使用了默认英语配置，用户切换语言时未及时更新设置？

当前实现代码 #

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);
    }
  }

问题分析与解决建议 #

1. 核心问题：语言设置未实时更新
   当前代码中，this.recognition.lang仅在init()初始化阶段设置一次。如果用户后续切换语言，this.language2!.short的值发生变化，但recognition.lang不会自动同步更新，导致识别仍沿用初始化时的语言配置（大概率是默认英文）。

2. 正确的实现方式
   把语言配置逻辑移到start()方法中，每次启动识别前都根据当前选中的语言更新recognition.lang，确保每次识别都使用最新的语言设置。

3. 调整后的代码示例

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() {
    // 每次启动识别前更新语言配置
    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;
    }
    try {
      this.recognition.start();
      this.speechRecognitionStart = true;
      this.isStoppedSpeechRecog = false;
      this.speechRecognitionWait = true;
    } catch (error) {
      this.recognition.stop();
      console.error(error);
    }
  }

4. 额外注意事项
   • 确认目标语言在Chrome的SpeechRecognition支持范围内，部分小众语言可能支持有限；
   • 如果continuous设为false，每次识别结束后需重新调用start()，此时同样会触发语言配置更新，无需额外处理。

内容的提问来源于stack exchange，提问作者Thomas David Kehoe