Speechify音频块合并播放实现方案及RN+Node适配咨询

问题描述 #

我当前用React Native做前端，Node+Express做后端，借助Amazon Polly生成单句的MP3音频块，目前能单独播放每个音频块，iOS后台也能播放，但没法像Speechify那样把这些片段整合起来——Speechify会把文本转成MP3，随阅读进度请求单句音频（返回base64编码的MP3块），预加载2-3句，还能在锁屏显示单个长文件的播放控制和预估时长，不会频繁切换曲目。想知道这种效果是怎么实现的，是不是通过设备向本地URL流式传输？

实现方案 #

1. 核心思路：虚拟长文件 + 流媒体拼接 #

Speechify并没有真的把所有音频块合并成一个本地大文件，而是通过流媒体拼接+系统媒体会话元数据配置，让系统认为正在播放单个长音频。具体分后端流处理和前端播放控制两部分：

2. 后端：构建连续的MP3数据流 #

Amazon Polly返回的单句MP3通常带有独立的ID3头，直接拼接会导致播放卡顿或被识别为多个曲目。后端需要做以下处理：

• 接收前端的文本分段请求，调用Polly生成单句MP3，去掉每个片段的ID3头（仅保留第一个片段的头），只保留纯音频帧数据。
• 用Node.js的stream模块创建一个可追加的可读流，把预加载的音频帧连续输出，同时随着用户阅读进度，不断将新生成的音频帧追加到流中。
• 在Express中暴露这个流的接口，前端通过HTTP请求这个接口获取连续的音频流，而非逐个请求单个音频块。

示例代码（Node/Express）：

const { PassThrough } = require('stream');
const AWS = require('aws-sdk');
const polly = new AWS.Polly({ region: 'us-east-1' });

// 全局维护一个可追加的流
const audioStream = new PassThrough();

// 生成单句音频并追加到流
async function addSentenceToStream(text) {
  const params = {
    Text: text,
    OutputFormat: 'mp3',
    VoiceId: 'Joanna'
  };
  const pollyResp = await polly.synthesizeSpeech(params).promise();
  // 去掉ID3头（MP3头通常前128字节为ID3v1，可根据实际调整）
  const audioFrame = pollyResp.AudioStream.slice(128);
  audioStream.write(audioFrame);
}

// 暴露流媒体接口
app.get('/audio-stream', (req, res) => {
  res.setHeader('Content-Type', 'audio/mpeg');
  res.setHeader('Transfer-Encoding', 'chunked');
  audioStream.pipe(res);
});

3. 前端：流媒体播放器+自定义媒体会话 #

在React Native中，使用支持流媒体的播放库（如react-native-track-player），并配置系统媒体会话，让系统识别为单个播放曲目：

• 加载后端的/audio-stream URL作为单个播放轨道，而非加载多个独立音频块。
• 预估总时长：根据文本总字数、Polly的语速参数计算预估总时长，设置到媒体元数据中。
• 配置媒体会话：通过react-native-track-player的updateMetadata方法，设置统一的标题、预估总时长，实时更新当前播放位置，这样锁屏会显示为单个长文件的控制界面。

示例代码（React Native）：

import TrackPlayer from 'react-native-track-player';

// 初始化播放器
async function setupPlayer() {
  await TrackPlayer.setupPlayer();
  // 添加流媒体轨道
  await TrackPlayer.add({
    id: 'continuous-audio',
    url: 'http://your-backend-domain/audio-stream',
    title: '你的音频标题',
    duration: 3600 // 预估总时长（秒），可根据文本动态计算
  });
  // 配置锁屏控制权限
  await TrackPlayer.updateOptions({
    capabilities: [
      TrackPlayer.CAPABILITY_PLAY,
      TrackPlayer.CAPABILITY_PAUSE,
      TrackPlayer.CAPABILITY_SEEK_TO
    ],
    compactCapabilities: [
      TrackPlayer.CAPABILITY_PLAY,
      TrackPlayer.CAPABILITY_PAUSE
    ]
  });
}

// 实时更新播放进度到锁屏
TrackPlayer.addEventListener('playback-progress', (progress) => {
  TrackPlayer.updateMetadata({
    position: progress.position,
    duration: progress.duration || 3600 // 动态修正总时长
  });
});

4. 预加载与无缝衔接 #

• 后端提前预加载2-3句的音频帧到流中，前端请求流时能立即开始播放。
• 当播放到当前流的末尾时，后端已经追加了新的音频帧，播放器会自动继续读取，实现无缝播放，不会出现曲目切换的提示。

5. 本地拼接替代方案（适合小体量内容） #

如果不想依赖后端流，也可以在前端本地拼接音频块：

• 把预加载的base64音频块解码为二进制数据，去掉每个块的ID3头后拼接成单个二进制Blob。
• 创建本地URL（URL.createObjectURL(blob)），用播放器加载这个URL，同时动态向Blob追加新的音频块。不过这种方式在iOS后台可能有内存限制，不如后端流稳定。

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