ontimeupdate event gets fired forever in firefox

I have a strange issue with the timeupdate event that is only occurring on firefox. Basically, I have an element that I create inside of an angular directive; I bind a function to ontimeupdate, and that event gets fired nonstop even when the currentTime value is 0

Brief summary of the code:

// angular directive controller function
...

DOMAudioObject = createAudioObject(src);
DOMAudioObject.audio.ontimeupdate = onTimeUpdate;

function createAudioObject(src) {
    return {
        audio: new Audio(src),
        playback: $scope.playback,
        name: $scope.name
    };
}

function onTimeUpdate() {
    var currentTime = DOMAudioObject.audio.currentTime;
    console.log(currentTime);
    $scope.currentTime = currentTime;
    $scope.audio.currentTime = currentTime;                   
    $scope.$apply();
}

enter image description here

Then, as you see in that image, the onTimeUpdate() function keeps getting called over and over again, even though the value of currentTime hasnt changed (it is 0 each and every time)

Again this only occurs on firefox. Chrome, safari, and even internet explorer behave nicely. I am running firefox 40.0.3 on Mac OS X 10.11 El Capitan, angular 1.4.6

Does anyone have some insight into what might be happening here, and any potential solutions to fix it?


Source: html5

Leave a Reply