Issue: I created a game similar to Flappy Bird using Three.js. Every time I tap the screen, a flapping sound is triggered. However, playing this audio causes a slight lag in the game, making it less smooth. The lag only occurs when the audio is played and not while it is actually playing.
Audio Configuration: To set up the audio, I followed these steps:
var soundFly = new Audio();
soundFly.src = "https://dl.dropbox.com/s/tj7mxg26egzo4zx/flap.wav?dl=0";
soundFly.preload = "auto";
Next, I load all audio files when the game starts (on button click):
function loadAudio()
{
soundFly.play().then(function () {
soundFly.pause()
}).catch(function (e) {
console.log("soundFly - " + e)
});
};
Then, every time the screen is touched, I play the sound:
this.soundFly.play().catch(function (e) {
console.log("soundFly - " + e)
})
This setup works efficiently, but the slight lag persists.
Rendering: Here is how I configured the scene rendering:
var clock = new THREE.Clock();
var delta=0;
clock.start(); //makes rendering timedependent
var render = function ()
{
delta = clock.getDelta();
//All movements are based on speed * delta
requestAnimationFrame(render);
renderer.render(scene, camera);
};
FPS: I also assessed the impact of audio.play() on the FPS. My FPS remains stable at around 59. However, when I play the audio, it drops to between 20-30, likely causing the minor lag as shown in the image below:
I measured the FPS using this:
console.log(1/delta);
I also checked for 'flapp' output in the console when touching the screen.
I am hopeful someone can provide an explanation for this issue!
Best regards, Joakim