使用浏览器语音合成功能（在Angular应用程序上）-DEV365 开发者社区

猜猜是什么？
我做出了一个有趣的决定。我正在搬到德国！但这是踢球者：我决定选择捷径并创建自己的应用程序来为我处理一切，而不是像负责任的成年人那样勤奋地学习Deutsch。天才还是疯狂？我们会看到！

所以，我遇到的第一个障碍是那些倾斜的德语单词的发音。认真地说，他们听起来像一群猫参加卡拉OK会议。但是不要害怕，因为我的应用程序可以进行救援！它不仅提供了翻译，而且还教我如何正确发音这些单词。我会很快像专业人士一样掌握德语，或者至少在我自己尝试时咯咯笑时。

为此

我决定全面使用Angular作为此应用。为什么？好吧，可以说我对Angular的时尚和魅力有一个情绪。但是，嘿，如果您不是像我这样的角度发烧友，请不要担心！这个项目的优点在于它以良好的JavaScript为单位，因此您可以使用您喜欢的任何框架来进行这一语言之旅。这是一种选择自己的冒险交易！

第一步：刚刚创建了一个服务来处理这一点：

export class SpeechService {
  synthesis = window.speechSynthesis;

  start(text: string, rate = 1) {
    const textToSpeech = new SpeechSynthesisUtterance(text);
    textToSpeech.lang = "de-DE";
    textToSpeech.text = text;
    textToSpeech.rate = rate;

    const voice = speechSynthesis.getVoices().filter((voice) => {
      return voice.name === "Google Deutsch";
    })[0];
    textToSpeech.voice = voice;

    this.synthesis.speak(textToSpeech);
  }
}

根据我的经验，这只是在Chrome中正确起作用（带有正确的口音）...
要查看有什么声音，您可以检查here

它用于此部分（我只关心Deutsch）：

    const voice = speechSynthesis.getVoices().filter((voice) => {
      return voice.name === "Google Deutsch";
    })[0];

要使用此服务，我有一个简单的组件来调用此服务

@Component({
  selector: 'app-speech',
  standalone: true,
  template: `
  <form class="speech-form" [formGroup]="formGroup">
    <label style="margin-bottom: 10px">Please Insert German Word</label>
    <input formControlName="text" style="margin-bottom: 20px" />
    <button
      style="margin-bottom: 20px"
      (click)="handleButtonStartClick($event, 1)"
    >
      Say It
    </button>
    <button (click)="handleButtonStartClick($event, 0.4)">Say It Slowly</button>
  </form>
  `,
  styleUrls: ['./speech.component.css'],
  imports: [ReactiveFormsModule],
})
export class SpeechComponent {
  formGroup = new FormGroup({
    text: new FormControl('', [Validators.required]),
  });

  constructor(private speechService: SpeechService) {}

  handleButtonStartClick(e: Event, speed: number) {
    e.preventDefault();
    if (!!this.formGroup.controls?.text?.value) {
      this.speechService.start(this.formGroup.controls.text.value, speed);
    }
  }
}

有一个按钮可以说话，而其他可以慢慢说的（0.4速度），相信我，理解** deutsch **词，我需要它。

如果您想测试它，只是为了它here on stackblitz

在真实的应用中，它也具有语音识别功能，也许将来我也可以分享。

告诉我您的事，如果您发现它很有趣，可以自由叉就尝试一下。