文本高亮显示在jQuery的音频同步 [英] Text highlight with audio sync in Jquery

问题描述

我需要同步文本和音频许多Web页面。

I need to sync text and audio on many web pages.

在播放文本音频应（通过文字或字符，这样的同步是必要的只为那句开始不字）被强调的词组短语。

While the audio is played the text should be highlighted phrase by phrase (not word by word or by character so sync is necessary only for the start of the phrase).

我想不使用闪光灯唯一的解决办法，我会preFER使用的东西更多的HTML友好。

I'd like not to use a flash only solution and I'd prefer to use something more HTML friendly.

我想用两个插件的组合：

I thought to use a combination of two plugins:

• JPlayer 用于音频


• jQuery的highligheter 以突出显示文本

• JPlayer for the audio
• Jquery highligheter for highlighting the text

我可以再编写一个jQuery脚本到周期的各种短语。
第一个问题是，JPlayer只有个出场的​​事件，而不是precise时间轴事件，所以我需要分割为更小的音频文件所说的文字的全部MP3音频为每个词组（长的编辑工作和preLOAD管理需要）。

I could then write a jquery script to cycle on the various phrases. The first problem is that JPlayer has only percentage played events and not precise timeline events so I would need to split the full mp3 audio of the spoken text in smaller audio files for each phrase (long editing work and preload management needed).

是否有这更好的解决办法？我应该回到更容易充分SWF的解决方案？

Is there a better solution for this? Should I go back to the easier full swf solution?

推荐答案

你可以做的是脚本JavaScript中的时间表。当音频开始播放，您在时间轴上的每个动作设置超时。这需要你的音频当然没有任何延迟播放。

What you could do is script the timeline in javascript. When the audio starts to play, you set timeouts for each action on the timeline. This will require your audio to play without any delays of course.

这将是这个样子：

   <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>

这篇关于文本高亮显示在jQuery的音频同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！