jquery - Jquery 中的文本突出显示与音频同步

Question

我需要同步许多网页上的文本和音频。

播放音频时，文本应逐短语突出显示(而不是逐字或逐字符突出显示，因此仅在短语开头才需要同步)。

我不想使用仅 Flash 的解决方案，而更愿意使用对 HTML 更友好的解决方案。

我想结合使用两个插件:

• JPlayer对于音频
• Jquery highligheter用于突出显示文本

然后我可以编写一个 jquery 脚本来循环使用各个短语。第一个问题是 JPlayer 只有百分比播放事件，而不是精确的时间线事件，因此我需要将每个短语的语音文本的完整 mp3 音频拆分为较小的音频文件(需要长时间的编辑工作和预加载管理)。

有没有更好的解决方案？我应该回到更简单的完整 swf 解决方案吗？

Answer 1

您可以做的是用 JavaScript 编写时间线脚本。当音频开始播放时，您可以为时间线上的每个操作设置超时。当然，这将要求您的音频能够毫无延迟地播放。

它看起来像这样:

   <div>one</div>
   <div>two</div>
   <div>three</div>

<script>
// this is the timeline
var actions = [  { time : 1, action : function() { $('div:eq(0)').css('color','red') } },
                 { time : 1.5, action : function() { $('div:eq(1)').css('color','green') } },
                 { time : 2, action : function() { $('div:eq(2)').css('color','blue') } } ];

$(document).ready( function() {
        // execute the timeline
        for( var i in actions ) {
            setTimeout( actions[i].action, actions[i].time * 1000 );
        }
});

</script>