Question

问题： 我使用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);
};

FPS： 我还检查了audio.play（）如何影响FPS。我的FPS稳定在大约59。但是，当我播放音频时，FPS下降到20-30之间，这可能是导致微小的滞后的原因（见图）：

Audio.play() affecting FPS

我使用以下方法检查了FPS：

console.log(1/delta);

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

我希望有人对此做出解释！

最好的问候，乔基姆

Answer 1

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

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

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

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

Audio.play（）导致微小的滞后

1 个答案: