Audio.play() छोटे अंतराल का कारण बनता है

समस्या: मैंने Three.js का उपयोग करके एक फ्लैपी-बर्ड जैसा गेम बनाया है। जब भी मैं स्क्रीन पर टैप करता हूं, एक "फ्लैप" -साउंड बजाया जाता है। हालाँकि इस ऑडियो को चलाने से एक छोटा सा लैग होता है, जो गेम को कम स्मूथ बनाता है। अगर मैं आवाज हटा दूं, तो सारा लैग गायब हो जाता है। लैग केवल तब दिखाई देता है जब ऑडियो चलाया जाता है, न कि ऑडियो चलने के दौरान।

ऑडियो सेट-अप: पहले मैंने ऑडियो को इस तरह सेट किया:

var soundFly = new Audio();
soundFly.src = "https://dl.dropbox.com/s/tj7mxg26egzo4zx/flap.wav?dl=0";
soundFly.preload = "auto";

आगे मैं खेल शुरू करने पर सभी ऑडियो लोड करता हूं (बटन क्लिक पर):

function loadAudio()
{
soundFly.play().then(function () {
   soundFly.pause()
   }).catch(function (e) {
            console.log("soundFly - " + e)
            });           
};

फिर, जब भी मैं स्क्रीन को छूता हूं, मैं ध्वनि बजाता हूं:

this.soundFly.play().catch(function (e)     {
    console.log("soundFly - " + e)
})

यह बहुत अच्छा काम करता है, लेकिन छोटा अंतराल दिखाई देता है।

रेंडरिंग: इस प्रकार मैंने दृश्य का प्रतिपादन स्थापित किया:

var clock = new THREE.Clock();
var delta=0;
clock.start(); //makes rendering timedependent

var render = function ()
{

delta = clock.getDelta();

//All movement is set using speed*delta

requestAnimationFrame(render);
renderer.render(scene, camera);
};

एफपीएस: मैंने यह भी जांचा है कि कैसे audio.play() FPS को प्रभावित करता है। मेरा एफपीएस लगभग 59 पर स्थिर है। लेकिन जब मैं ऑडियो चलाता हूं, तो एफपीएस 20-30 के बीच गिर जाता है, जो शायद छोटे अंतराल का कारण बनता है (चित्र देखें):

ऑडियो.प्ले () एफपीएस को प्रभावित करता है

मैंने इसका उपयोग करके एफपीएस की जाँच की:

console.log(1/delta);

और स्क्रीन को टच करते समय कंसोल पर "फ्लैप" आउटपुट भी करता है।

मुझे आशा है कि किसी के पास इसका स्पष्टीकरण होगा!

सादर, जोआकिमो