如何用RxJS实现Angular文本转语音Observable序列逐个处理

嘿，这个场景我熟！咱们一步步来搞定它——核心就是要先把句子推给UI显示，再等语音播完才处理下一句，用RxJS的操作符就能完美实现～

核心思路 #

我们需要把「显示句子」和「等待语音播放完成」这两个操作串成一个顺序执行的流，然后用concatMap来确保前一句的语音播完后，再处理下一句。因为concatMap会严格等待前一个Observable完成后，才会订阅下一个。

步骤1：封装语音播放的Observable #

首先写个工具函数，把浏览器的SpeechSynthesis转换成Observable，这样我们能方便地用RxJS控制播放流程：

import { Observable } from 'rxjs';

// 管道类里的私有方法
private speak(text: string): Observable<void> {
  return new Observable(observer => {
    const utterance = new SpeechSynthesisUtterance(text.trim());
    
    // 播放完成时通知Observable完成
    utterance.onend = () => observer.complete();
    // 出错时抛出错误
    utterance.onerror = (err) => observer.error(err);
    
    // 开始播放
    window.speechSynthesis.speak(utterance);
    
    // 清理逻辑：如果订阅被取消（比如组件销毁），停止播放
    return () => window.speechSynthesis.cancel();
  });
}

步骤2：改造管道的transform方法 #

接下来修改管道的核心逻辑，分两种情况处理输入：

情况1：输入是「完整文本字符串」的Observable

如果输入是一段包含多个句子的完整文本，先把它分割成单个句子的流，再顺序处理：

import { Observable, EMPTY, from, of } from 'rxjs';
import { switchMap, concatMap } from 'rxjs/operators';

transform(input: Observable<string>, ...args: unknown[]): Observable<string> {
  if (!input) return EMPTY;

  return input.pipe(
    // 把完整文本分割成句子（可根据需求调整分割规则）
    switchMap(fullText => from(
      fullText.split(/[.!?]+/).filter(sentence => sentence.trim().length > 0)
    )),
    // 顺序处理每个句子：先推给UI显示，再等语音播完
    concatMap(sentence => {
      // 先发出句子，UI会立即收到并显示
      return of(sentence).pipe(
        // 等待语音播放完成后，再处理下一句
        concatMap(() => this.speak(sentence))
      );
    })
  );
}

情况2：输入是「逐个发出句子」的Observable

如果输入本身就是每次emit一个句子的Observable，直接去掉分割步骤即可：

transform(input: Observable<string>, ...args: unknown[]): Observable<string> {
  if (!input) return EMPTY;

  return input.pipe(
    concatMap(sentence => {
      return of(sentence).pipe(
        concatMap(() => this.speak(sentence))
      );
    })
  );
}

步骤3：UI端的使用 #

在模板里用async管道订阅输出，就能实时看到句子：

如果要逐个显示当前播放的句子：

<!-- 每次语音播放时，这里会更新为当前句子 -->
<p>{{ textObservable | yourSpeechPipe | async }}</p>

如果要保留所有已播放的句子：
可以在管道里加个scan操作符收集句子数组：

// 改造管道返回数组
import { scan } from 'rxjs/operators';

transform(input: Observable<string>, ...args: unknown[]): Observable<string[]> {
  // ...前面的分割/处理逻辑不变
  return input.pipe(
    concatMap(sentence => of(sentence).pipe(concatMap(() => this.speak(sentence)))),
    // 把句子收集到数组里
    scan((acc, curr) => [...acc, curr], [] as string[])
  );
}

然后模板里循环显示：

<div *ngFor="let sentence of (textObservable | yourSpeechPipe | async)">
  <p>{{ sentence }}</p>
</div>

额外注意点 #

• 浏览器兼容性：部分浏览器对SpeechSynthesis有交互限制（比如Chrome要求首次调用必须在用户点击事件内），可以在组件里加个初始化按钮，或者在管道里做兼容性判断。
• 取消订阅：async管道会自动处理订阅销毁，我们的speak方法里的清理逻辑会停止播放，避免内存泄漏。
• 句子分割规则：示例里用的是简单的标点分割，你可以根据实际需求优化（比如处理带引号、省略号的句子）。

内容的提问来源于stack exchange，提问作者ovg