在angularjs中同步音频和动画答案

【问题标题】：Sync audio and animation in angularjs在angularjs中同步音频和动画
【发布时间】：2014-05-25 19:07:14
【问题描述】：

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

在 jQuery 中，我为每个包含单词的 span 元素添加了一个 data-time="time" 属性。我将所有时间都存储在一个数组中。当调用音频 play() 函数时，我使用了一个计时器来跟踪经过的时间。每隔一段时间，我会轮询计时器（每 10 毫秒，因为所有时间都四舍五入到最接近的 10 毫秒）。如果当前时间与数组中的当前时间匹配，我使用选择器查找其 data-time 属性包含当前时间的跨度。该跨度将通过向其添加“突出显示”类来突出显示。该方案运行良好。

但是在 angularjs 中，我试图在不使用选择器的情况下实现相同的目标。有谁知道我可以做到这一点的方法？有人告诉我，使用 jQuery 完成的任何事情都可以在 angularjs 中完成。

非常感谢。

【问题讨论】：

标签： angularjs animation audio sync jqlite

【解决方案1】：

跟踪时间的方式与将其存储在 $scope.currentTime 中的方式相同，并且只需使用类似的 ng-class，

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

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

如果你在 Angular 版本中重复单词，它可能是这样的

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

【讨论】：