Javascript 音频事件侦听器被不间断地调用

我最初注意到只有在firefox上发生的timeupdate事件存在这个问题，但发现它也适用于其他事件侦听器，到目前为止，我在canplay上看到过它

基本上，我有一个元素，我在一个角度指令内部创建；我将一个函数绑定到ontimeupdate，即使currentTime值为0，该事件也会不间断地触发

守则摘要：

// 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();
}

完整控制器代码：

    function audioCtrl($scope) {

        // private reference to the DOM object that plays the audio
        var DOMAudioObject,
            watchers = {unbind: {}};

        // register watchers once the model is available, we need at least the id field
        watchers.unbind.model = $scope.$watch('model', init);
        // remove watchers when the user navigates away
        $scope.$on('$destroy', destroyWatchers);

        function applyAudioPropertiesAsync() {
            DOMAudioObject.audio.volume = $scope.volume;
            DOMAudioObject.audio.currentTime = $scope.currentTime;
            $scope.audio.duration = DOMAudioObject.audio.duration;
        }

        function applyAudioMetaProperties() {
            $scope.audio = $scope.audio || {};
            $scope.audio.id = $scope.model.id;
            $scope.audio.playback = $scope.playback;
            $scope.audio.name = $scope.model.name;
            $scope.audio.volume = $scope.volume;
            $scope.audio.currentTime = $scope.currentTime;
            $scope.audio.duration = DOMAudioObject.audio.duration || 0;
        }

        // fired when the audio object has been loaded from src
        function bindAudio(src, oldSrc) {
            if (src === undefined) {
                return;
            }

            // now safe to register watchers since they rely on the audio object
            registerWatchers();

            // if there is already a stored audio object associated with this visual, use it
            DOMAudioObject = $audio.get($scope.model.id);

            // audio src has been updated, reflect by pausing and creating a new audio object
            if (oldSrc && src !== oldSrc) {
                $scope.playback.play = false;
                $scope.currentTime = 0.0;
                pause(DOMAudioObject);
                DOMAudioObject = null;
            }

            // create a new audio object or use stored values instead of reinitializing each time
            if (!DOMAudioObject) {
                DOMAudioObject = createAudioObject(src);
                // set in $audio service for persistence across views and controllers
                $audio.set($scope.model.id, DOMAudioObject);
            } else {
                $scope.playback = DOMAudioObject.playback || $scope.playback;
                $scope.currentTime = DOMAudioObject.audio.currentTime || $scope.currentTime;
                $scope.volume = DOMAudioObject.audio.volume || $scope.volume;
            }

            // only bind meta properties, binding actual Audio object causes problems in some browsers
            applyAudioMetaProperties();

            // add values that must be calculated after initial load
            DOMAudioObject.audio.oncanplay = applyAudioPropertiesAsync;
            // tell playback progress indicator to move on timeupdate event by firing a digest cycle
            DOMAudioObject.audio.ontimeupdate = onTimeUpdate;
            // tell animate directive to stop scrolling when the audio has ended
            DOMAudioObject.audio.onended = onAudioEnded;

            // tell parent this directive is ready when the audio has fully loaded
            watchers.unbind.duration = $scope.$watch('audio.duration', function (val) {
                if (val > 0) {
                    $scope.$emit('audio.ready', {id: $scope.model.id, audio: $scope.audio});
                    watchers.unbind.duration();
                }
            });
        }

        // create a dom audio object
        function createAudioObject(src) {
            return {
                audio: new Audio(src),
                playback: $scope.playback,
                name: $scope.model.name
            };
        }

        function destroyWatchers() {
            if (watchers.unbind.audio) {
                watchers.unbind.audio();
            }
            if (watchers.unbind.playback) {
                watchers.unbind.playback();
            }
            if (watchers.unbind.progress) {
                watchers.unbind.progress();
            }
            if (watchers.unbind.volume) {
                watchers.unbind.volume();
            }
        }

        function init(visual) {
            if (visual === undefined) {
                return;
            }
            // prevent updates to visual model from rebinding audio
            watchers.unbind.model();
            // when the audio-src is available and fully loaded, create audio objects
            watchers.unbind.audio = $scope.$watch('audioSrc', bindAudio);
        }

        function onAudioEnded() {
            // ensure playback variables are updated
            $scope.$apply($scope.playback.play = false);
            $scope.currentTime = 0;
        }

        // timeupdate event to update scope attribute with that of the Audio object
        function onTimeUpdate() {
            var currentTime = DOMAudioObject.audio.currentTime;
            $scope.currentTime = currentTime;
            $scope.audio.currentTime = currentTime;
            $scope.$apply();
        }

        // pause the current track
        function pause(audio) {
            if (audio) {
                audio.audio.pause();
            }
        }

        // play the current track
        function play(audio) {
            if (audio) {
                audio.audio.play();
            }
        }

        function registerWatchers() {
            // allow audio to be toggled on/off
            watchers.unbind.playback = $scope.$watch('playback.play', togglePlay);
            // allow volume changes
            watchers.unbind.volume = $scope.$watch('volume', updateVolume);
            // allow seeking of audio
            watchers.unbind.progress = $scope.$watch('currentTime', seek);
            // update the name variable on the audio object so it reflects in global scope
            watchers.unbind.name = $scope.$watch('model.name', applyAudioMetaProperties);
        }

        // move audio position pointer to a new place
        function seek(val) {
            var threshold = 1,
                curr = DOMAudioObject.audio.currentTime;

            if ((val >= curr + threshold) || (val <= curr - threshold)) {
                DOMAudioObject.audio.currentTime = val;
            }
        }

        // toggle play/pause
        function togglePlay(val) {
            if (val) {
                play(DOMAudioObject);
                $audio.setGlobal($scope.audio);
            } else {
                pause(DOMAudioObject);
            }
        }

        // allow the volume to be changed, scope reference updates automatically (pass by reference)
        function updateVolume(val) {
            if (val) {
                DOMAudioObject.audio.volume = val;
            }
        }
    }

然后，正如您在该图中所看到的，onttimeupdate函数不断地被调用，即使currentTime的值没有更改，每次都是0

同样，这只发生在firefox上。Chrome、safari甚至internet explorer都表现得很好。我正在Mac OS X 10.11 El Capitan上运行firefox 40.0.3，angular 1.4.6

---

有没有人对这里可能发生的事情有一些了解，以及有什么潜在的解决方案来修复它？

事实证明，罪魁祸首就是这条线

DOMAudioObject.audio.currentTime=$scope.currentTime

显然，设置此值会导致事件侦听器无限期激发。我不知道为什么。但我删除了这条线，一切都按预期进行

我发布了一个新的问题，想看看是否有人对这种奇怪的现象有所了解

---

是否有可能以某种方式使DOMAudioObject.audio===$scope.audio？如果是这种情况，我认为FF可以在currentTime集合中放置EventDispatcher，这将是正常的行为。然后，解决方法就是这样==$scope.audio$scope.audio.currentTime=currentTime；我试着照你说的去做，但还是没有解决。我甚至尝试过用angular.copy包装$scope和DOMAudioObject之间的任何绑定，但问题仍然存在。如果你有兴趣看的话，我更新了我的帖子，提供了更多的控制器代码