comparison interfaces/timeline.js @ 2890:29c081e03e6b

Use requestAnimationFrame for timeline

         progress = progress.substr(0, 5);
         this.playButton.DOM.textContent = "Loading: " + progress + '%';
     };
     this.startPlayback = function () {
         // Called when playback has begun
-        canvasIntervalID = window.setInterval(this.canvas.drawTicker.bind(this.canvas), 100);
+        var animate = function () {
+            this.canvas.drawTicker.call(this.canvas);
+            if (this.playButton.DOM.textContent == "Stop") {
+                window.requestAnimationFrame(animate);
+            }
+        }.bind(this);
         this.playButton.DOM.textContent = "Stop";
         interfaceContext.commentBoxes.highlightById(audioObject.id);
+        canvasIntervalID = window.requestAnimationFrame(animate);
     };
     this.stopPlayback = function () {
         // Called when playback has stopped. This gets called even if playback never started!
         window.clearInterval(canvasIntervalID);
         this.canvas.clearCanvas(this.canvas.layer2);