angularjs - 在angularjs中同步音频和动画

标签 angularjs animation audio sync jqlite

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

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

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

非常感谢。

最佳答案

跟踪时间的方式与将其存储在 $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>

关于angularjs - 在angularjs中同步音频和动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23858933/

相关文章:

javascript - 回调函数未被调用

javascript - MEAN-Stack 使用 mongoose 在 MongoDB 中保存数组

javascript - [Angular 4/TypeScript]导入组件路径无法识别。但似乎有效并且应该有效

android - 如何以编程方式制作动画

jquery - 在播放动画之前等待元素出现在 View 中

c++ - 计算总能量

angularjs - Protractor - 如何使用 Protractor 检索 'ng-disabled' 的值

javascript - 导入到 Three.js 后,Blender 动画变得扭曲

ios - 如何将音频单元输出的相位移动 180 度

ios - 在 Safari 上一次播放多个音频文件