如何在JavaScript中实现阿拉伯语朗读时的文本同步高亮（兼容全平台）

阿华AIGC实验室

2026-4-14

我完全懂你的痛点：带变音符号的阿拉伯语文章，想实现朗读时同步高亮对应文本，结果Web Speech API在安卓Chrome上要么读得乱七八糟，要么直接罢工，tts-react也搞不定移动端——全平台兼容这个需求确实得换个更靠谱的思路。

其实核心问题在于Web Speech API的跨平台一致性太差，尤其是对阿拉伯语这类RTL（从右到左）语言的支持，不同设备、浏览器的表现天差地别。要解决这个问题，最稳妥的方案是放弃依赖浏览器内置的TTS，改用预生成音频+时间戳同步高亮的方式，不管是真人朗读还是机器人语音都能适配，而且全平台通用。

具体实现步骤

1. 准备带时间戳的音频与文本单元

首先你需要：

把阿拉伯语文本转成音频（机器人语音的话，用Google Text-to-Speech、Amazon Polly这类服务都能生成带变音符号的标准阿拉伯语音频；真人音频直接用你现有的就行）。
给文本拆分出可高亮的单元（比如句子、短语），并给每个单元配上对应的音频播放时间戳（比如这个单元从第2秒开始，第5秒结束）。

怎么获取时间戳？

如果是机器人语音：用Google Cloud TTS这类API，它会返回每个单词/短语的精确时间戳，直接对应到你的文本单元即可。
如果是真人音频：用字幕工具（比如Audacity的字幕插件、在线SRT生成工具）把音频转成SRT字幕，然后提取每个字幕片段的开始/结束时间，对应到文本里。

2. 编写HTML+JavaScript实现同步高亮

下面是完整的示例代码，专门适配阿拉伯语RTL布局，全平台都能跑：

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>阿拉伯语朗读同步高亮</title>
  <style>
    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
    #text-container {
      font-size: 1.2em;
      line-height: 1.5;
      margin: 20px 0;
      padding: 10px;
    }
    #audio-player {
      width: 100%;
      max-width: 600px;
    }
  </style>
</head>
<body>
  <!-- 把文本拆分成带时间戳的span单元 -->
  <div id="text-container">
    <span data-start="0" data-end="2">موضوعات الكتاب: </span>
    <span data-start="2" data-end="5">أولا: مراجعة لما سبق في الكتاب الأول (التمهيدي) .</span>
    <span data-start="5" data-end="7">ثانيا الدروس:</span>
    <span data-start="7" data-end="10">1- الدرس الأول: ( هذا – هذه) : الإشارة لكلمات للتفريق بين : المذكر والمؤنث .</span>
    <span data-start="10" data-end="13">2- الدرس الثاني [هنا وهناك] : الإشارة لكلمات للتفريق بين القريب والبعيد.</span>
    <span data-start="13" data-end="17">3- الدرس الثالث [أين ؟] : تمييز الاتجاهات مع التقريب بالصور ( فوق – تحت – أمام – خلف – يمين – يسار – في – على...  ) .</span>
    <span data-start="17" data-end="21">4- الدرس الرابع [الأوصاف]:  ( كبير صغير – طويل قصير – قليل كثير  – قريب بعيد – سريع بطيء – خفيف ثقيل – سمين نحيف ) .</span>
    <span data-start="21" data-end="24">5- الدرس الخامس [الألوان]: ( أحمر – أصفر – أخضر – أزرق  ... ) .</span>
  </div>

  <!-- 你的预生成音频 -->
  <audio id="audio-player" controls>
    <source src="your-arabic-audio.mp3" type="audio/mpeg">
    你的浏览器不支持音频播放，请升级浏览器。
  </audio>

  <script>
    const audio = document.getElementById('audio-player');
    const textSpans = document.querySelectorAll('#text-container span');

    // 监听音频播放时间更新，同步高亮
    audio.addEventListener('timeupdate', () => {
      const currentTime = audio.currentTime;
      // 先移除所有高亮样式
      textSpans.forEach(span => span.classList.remove('highlight'));
      // 找到当前时间对应的文本单元
      const activeSpan = Array.from(textSpans).find(span => {
        const start = parseFloat(span.dataset.start);
        const end = parseFloat(span.dataset.end);
        return currentTime >= start && currentTime < end;
      });
      // 给当前单元添加高亮
      if (activeSpan) {
        activeSpan.classList.add('highlight');
        // 可选：自动滚动到高亮文本（长文章时很实用）
        activeSpan.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }
    });

    // 暂停或结束时清空高亮
    audio.addEventListener('pause', () => {
      textSpans.forEach(span => span.classList.remove('highlight'));
    });

    audio.addEventListener('ended', () => {
      textSpans.forEach(span => span.classList.remove('highlight'));
    });
  </script>
</body>
</html>