I am trying to sync audio with animation in angularjs. I have done it before using jQuery but now that I have ported my project to angularjs, I am trying to stick to the angularjs philosophy.
In jQuery, I added a data-time="time" attribute to each span element containing a word. I stored all the timings in an array. When the the audio play() function was called I used a timer to keep track of the elapsed time. At intervals I would poll the timer (every 10ms since all the timings were rounded off to the nearest 10ms). If the current time matched the current timing in the array, I used a selector to find the span whose data-time attribute held the current time. That span would be highlighted by adding a 'highlight' class to it. The scheme worked well enough.
However in angularjs, I am trying to achieve the same thing without using selectors. Does anyone know a way in which I could do this? I am told that anything done using jQuery can be done in angularjs.
Thanks much.
Keep track of time the same way store it in $scope.currentTime and just use a ng-class like,
<span ng-class="{highlight:currenttime == 910}">word</span>
910 here would be whatever you were assigning to data-time on jquery version.
if you are ng-repeating words in angular version it could be like this
<span ng-repeat="word in words" ng-class="{highlight:currenttime == word.time}">{{word.text}}</span>