Jquery中的文本高亮和音频同步

Question

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

当音频播放时，应该逐句（而不是逐词或逐字符）突出显示文本（因此仅需要开始短语的同步）。

我不想使用仅限Flash的解决方案，而是更喜欢使用更适合HTML的东西。

我考虑使用两个插件的组合：

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

然后，我可以编写一个jquery脚本来循环各个短语。

第一个问题是，JPlayer仅具有百分比播放事件，而没有精确的时间轴事件，因此我需要将完整的口语文本mp3音频拆分为每个短语的较小音频文件（需要长时间编辑和预加载管理）。

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

- Ronnie

---

它不仅是基于百分比的，看这里：http://github.com/happyworm/jPlayer/blob/master/jquery.jplayer/jquery.jplayer.js#L600.. 这里有一个“playedTime”变量和一个“totalTime”变量（作为您回调的第四个和第五个参数） - James

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>

- Marnix van Valen

---

ALTAF HUSSAIN的评论：“@Marnix van Valen - 真是个很酷的代码片段，正是我所需要的， 我想知道如果视频是从服务器加载的（HTML5视频标签），那么文本将在视频加载之前开始显示。 有没有什么解决方法，比如使用预加载器或其他任何东西。” - Peter O.

对于HTML5视频，您可以使用丰富的事件和属性来同步操作。例如，您可以定期检查currentTime属性，并使用它来触发时间轴上的操作。这也可以让您补偿加载视频时的任何延迟。 - Marnix van Valen