React Native应用中如何在音频播放时生成并显示字幕？

核心逻辑 #

和视频字幕原理一致：基于音频播放时间轴，匹配对应时间区间的字幕内容并实时渲染，只是无需关联视频画面，专注于字幕UI与音频进度的同步。

具体实现步骤 #

• 准备标准字幕文件：优先使用SRT或VTT格式，这类格式自带时间戳标记，解析成本低。示例SRT格式：

1
00:00:01,200 --> 00:00:04,500
你好，这是第一句音频字幕

2
00:00:05,100 --> 00:00:08,300
接下来是第二句内容

• 解析字幕为结构化数据：把字幕文件解析成包含开始时间（秒）、结束时间（秒）、字幕文本的对象数组。比如用JS实现SRT解析：

function parseSrt(srtContent) {
  const subs = [];
  const blocks = srtContent.trim().split(/\n\n+/);
  
  blocks.forEach(block => {
    const lines = block.split('\n');
    if (lines.length < 3) return;
    
    const timePair = lines[1].split(' --> ');
    const start = timeToSeconds(timePair[0]);
    const end = timeToSeconds(timePair[1]);
    const text = lines.slice(2).join('\n');
    
    subs.push({ start, end, text });
  });
  return subs;
}

function timeToSeconds(timeStr) {
  const [h, m, sMs] = timeStr.split(':');
  const [s, ms] = sMs.split(',');
  return +h * 3600 + +m * 60 + +s + +ms / 1000;
}

• 绑定音频进度与字幕渲染：监听音频播放器的时间更新事件，实时匹配当前播放时间对应的字幕，并更新UI：

const audio = document.getElementById('audioPlayer');
const subtitleEl = document.getElementById('subtitleBox');
let subtitles = [];

// 加载并解析字幕（实际项目中可替换为本地文件读取或接口请求）
fetch('./audio-sub.srt')
  .then(res => res.text())
  .then(content => {
    subtitles = parseSrt(content);
  });

// 实时同步字幕
audio.addEventListener('timeupdate', () => {
  const currentTime = audio.currentTime;
  const matchedSub = subtitles.find(sub => currentTime >= sub.start && currentTime <= sub.end);
  
  subtitleEl.textContent = matchedSub ? matchedSub.text : '';
});

• 优化UI体验：模仿YouTube的字幕样式，可添加：
  • 当前字幕高亮放大，历史字幕缩小保留在上方（多行展示）
  • 字幕区域半透明背景，避免遮挡其他内容
  • 快速定位：点击字幕跳转到对应音频时间点

注意事项 #

• 时间精度：必须处理毫秒级时间匹配，避免字幕切换延迟或错位
• 兼容性：移动端需适配平台音频API（Android用MediaPlayer的进度回调，iOS用AVPlayer的addPeriodicTimeObserver）
• 多字幕支持：维护多语言字幕数组，切换时替换解析后的字幕数据即可

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