Question

我最初注意到这个问题只发生在firefox上的timeupdate事件，但发现它也适用于其他事件监听器（到目前为止我已经在canplay上看到了它）

基本上，我有一个我在angular指令中创建的元素;我将一个函数绑定到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;
            }
        }
    }

然后，正如您在该图像中看到的那样，onTimeUpdate（）函数不断被反复调用，即使currentTime的值没有改变（每次都是0）

同样这只发生在firefox上。 Chrome，Safari，甚至是Internet Explorer都表现得很好。我在Mac OS X 10.11 El Capitan上运行firefox 40.0.3，角度为1.4.6

有没有人对这里可能发生的事情以及任何解决问题的潜在解决方案有所了解？

Answer 1

事实证明，罪魁祸首就在这里

DOMAudioObject.audio.currentTime = $scope.currentTime;

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

我发布了一个新问题，看看是否有人对这种陌生感有所了解

Setting currentTime attribute programatically on audio element causes event listeners to fire indefinitely

音频事件监听器被叫不停

1 个答案: