在angularjs中同步音频和动画

时间:2014-05-25 19:07:14

标签: angularjs animation audio sync jqlite

我正在尝试在angularjs中将音频与动画同步。我在使用jQuery之前已经完成了它,但是现在我将我的项目移植到angularjs,我试图坚持angularjs哲学。

在jQuery中,我添加了一个数据时间="时间"属性为包含单词的每个span元素。我将所有时间存储在一个数组中。当调用audio play()函数时,我使用了一个计时器来跟踪经过的时间。每隔一段时间我会轮询定时器(因为所有的定时都被舍入到最接近的10ms,所以每10ms)。如果当前时间与数组中的当前时间匹配,我使用选择器来查找其data-time属性保持当前时间的span。通过添加“突出显示”突出显示该范围。上课。该计划运作良好。

然而在angularjs中,我试图在不使用选择器的情况下实现相同的功能。有谁知道我可以做到这一点的方式?我被告知使用jQuery完成的任何事情都可以在angularjs中完成。

非常感谢。

1 个答案:

答案 0 :(得分:0)

跟踪时间,以同样的方式将它存储在$ scope.currentTime中,只需使用ng-class,

<span ng-class="{highlight:currenttime == 910}">word</span>

910这里将是您在jquery版本上分配给数据时间的任何内容。

如果你在角度版本中重复单词,它可能就像这样

<span ng-repeat="word in words" ng-class="{highlight:currenttime == word.time}">{{word.text}}</span>