Audio.play（）导致微小的延迟

Question

问题：我使用Three.js制作了类似飞鸟的游戏。 每次我点击屏幕，都会播放一个“翻盖”声音。 然而，播放此音频会导致微小的延迟，这会使游戏变得不那么顺畅。 如果我移除声音，所有lagg都会消失。 lagg仅在播放音频时出现，而不是在播放音频时出现。

音频设置：首先我按如下方式设置音频：

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)
})

这很好用，但是出现了一个小小的lagg。

渲染：这是我设置场景渲染的方法：

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);
};

FPS：我还检查了audio.play（）如何影响FPS。 我的FPS稳定在59左右。但是当我播放音频时，FPS会下降到20-30之间，这可能是造成微小延迟的原因（见图）：

影响FPS的Audio.play（）

我用这个检查了FPS：

console.log(1/delta);

并且在触摸屏幕时也会向控制台输出“flapp”。

我希望有人对此有解释！

最好的问候，Joakim

Answer 1

问题是您使用HTML5音频进行交互式音效。 API不适用于此目的。 相反，使用基于Web音频的类，如THREE.Audio或THREE.PositionalAudio ，它们可以在没有延迟和适当时间的情况下实现声音效果。

https://threejs.org/examples/#webaudio_timing

另请阅读以下指南以获取更多信息。 它说：

时序控制具有高精度和低延迟，允许开发人员编写能够准确响应事件的代码......