音频事件侦听器被不停地调用

Question

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

基本上，我在 angular 指令中创建了一个元素；我将一个函数绑定到 ontimeupdate，即使当前时间值为 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 都表现良好。我是运行 firefox 40.0.3 Mac OS X 10.11 El Capitan，angular 1.4.6

有没有人对这里可能发生的事情有一些了解，以及解决它的任何潜在解决方案？

Answer 1

原来，罪魁祸首是这里的这一行

DOMAudioObject.audio.currentTime = $scope.currentTime;

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

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

音频事件侦听器被不停地调用

Audio Event Listener Getting Called Non Stop

html

javascript

firefox

html5-audio

angularjs