Question

我正在编写一个HTML5游戏，这样在游戏过程中，当点击鼠标按钮时，就会发出枪击声。我确实有这个功能，但是，从单击鼠标按钮到实际播放声音时，有一个明显的小延迟。

以下是我的全身脚本代码中现有的相关代码片段，说明了这一特定功能：

Game = {};

Game.main = (function(sounds) {
    'use strict';

    Mouse = input.Mouse(),

    Shot_sounds = sounds.Shot({
        // none
    }),

    Mouse.registerCommand('mousedown', function(e, elapsedTime) {
        mouseCapture = true;
        if (begin && !end) {
            clicks.current++;
            if (clicks.current >= clicks.limit)
                clicks.current = clicks.limit;
            Shot_sounds.play(clicks.current);
        }
    });

}(Game.sounds));


Game.input = (function() {
    'use strict';

    function Mouse() {
        var that = {
            mouseDown : [],
            mouseUp : [],
            mouseMove : [],
            handlersDown : [],
            handlersUp : [],
            handlersMove : []
        };

        function mouseDown(e) {
            that.mouseDown.push(e);
            //console.log('mousedown - x: ' + e.clientX + ', y: ' + e.clientY);
        }

        function mouseUp(e) {
            that.mouseUp.push(e);
            //console.log('mouseup -   x: ' + e.clientX + ', y: ' + e.clientY);
        }

        function mouseMove(e) {
            that.mouseMove.push(e);
            //console.log('mousemove - x: ' + e.clientX + ', y: ' + e.clientY);
        }

        that.update = function(elapsedTime) {
            var event, handler;
            //
            // Process the mouse events for each of the different kinds of handlers
            for (event = 0; event < that.mouseDown.length; event++) {
                for (handler = 0; handler < that.handlersDown.length; handler++)
                    that.handlersDown[handler](that.mouseDown[event], elapsedTime);
            }
            for (event = 0; event < that.mouseUp.length; event++) {
                for (handler = 0; handler < that.handlersUp.length; handler++)
                    that.handlersUp[handler](that.mouseUp[event], elapsedTime);
            }
            for (event = 0; event < that.mouseMove.length; event++) {
                for (handler = 0; handler < that.handlersMove.length; handler++)
                    that.handlersMove[handler](that.mouseMove[event], elapsedTime);
            }
            //
            // Now that we have processed all the inputs, reset everything back to the empty state
            that.mouseDown.length = 0;
            that.mouseUp.length = 0;
            that.mouseMove.length = 0;
        };

        that.registerCommand = function(type, handler) {
            if (type == 'mousedown')
                that.handlersDown.push(handler);
            else if (type == 'mouseup')
                that.handlersUp.push(handler);
            else if (type == 'mousemove')
                that.handlersMove.push(handler);
        };

        var canvasElement = document.getElementById('canvas-cursor');
        //console.log('offsetX: ' + canvasElement.offsetLeft);
        //console.log('offsetY: ' + canvasElement.offsetTop);
        canvasElement.addEventListener('mousedown', mouseDown.bind(that));
        canvasElement.addEventListener('mouseup', mouseUp.bind(that));
        canvasElement.addEventListener('mousemove', mouseMove.bind(that));

        return that;
    }

    return {
        Mouse : Mouse 
    };
}());

Game.sounds = (function() {
    'use strict';

    var tracks = { 
        shoot_gun: 'media/sounds/shoot_gun.ogg', 
    };

    function Shot(spec) {
        var that = {};
        var clips = [];
        that.load = function(clicks) {
            for (let i = 0; i < clicks; i++) {
                var sound = new Audio();
                sound.src = tracks.shoot_gun;
                clips.push({
                    click: i+1, 
                    audio: sound, 
                    ready: false, 
                    active: false 
                });
            }
            clips.forEach(function(clip) {
                clip.audio.addEventListener('canplay', function() {
                    clip.ready = true;
                });
                clip.audio.addEventListener('timeupdate', function() {
                    that.stop();
                });
            })
        };
        that.play = function(clicks) {
            var clip = clips[clicks-1];
            if (clip.ready) {
                clip.audio.play();
                clip.active = true;
            }
        };
        that.stop = function() {
            clips.forEach(function(clip) {
                if (clip.audio.ended)
                    clip.active = false;
            })
        };
        that.pause = function() {
            clips.forEach(function(clip) {
                if (clip.active)
                    clip.audio.pause();
            })
        };
        that.resume = function() {
            clips.forEach(function(clip) {
                if (clip.active)
                    clip.audio.play();
            })
        };
        return that;
    }

    return {
        Shot : Shot 
    };
}());

当我自己搜索这个问题时，我确实遇到了一些描述某种已知的内置300毫秒延迟的文章，它似乎符合我所遇到的问题的描述。对于解决方案，我遇到的建议是使用名为FastClick的JS模块：

https://github.com/ftlabs/fastclick

我按照他们的说明将此FastClick模块启用到我的代码中，然而，它没有做任何事情并且没有任何区别。具体来说，我做了以下事情：

下载了他们的fastclick.js文件，并将其放在我的/ scripts /文件夹中，并附上我的所有其他脚本。

将以下代码插入index.html文件的head标记部分：

<script type='application/javascript' src='scripts/fastclick.js'></script>

将以下代码插入index.html文件的body标签部分的开头：

if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}

在上面的步骤2和3的代码中添加了console.log（）类型注释，以验证是否正在读入和激活代码。

因此，在执行上述步骤后，我没有看到原始300ms延迟被删除。另外为了清晰起见，您将看到正在使用的声音文件是OGG类型，与MP3不同，您可以在声音文件的开头删除静音。所以我知道OGG是好的，并且在激活的那一刻非常及时地播放。

然后，仔细查看FastClick及其文档后，我确实看到了以下声明：

＆＃34; FastClick没有在桌面浏览器上附加任何监听器。＆＃34;

所以我猜这意味着FastClick不会在我用来测试游戏的Chrome桌面浏览器中工作。如果FastClick无法解决问题，那么此时我和＃39;陷入僵局，我无法找到任何可以解决这个问题的方法。

鼠标单击声音延迟

0 个答案: