Audio.play() 导致微小的延迟。

Question

问题： 我使用Three.js制作了一个类似Flappy Bird的游戏。每次我点击屏幕时，都会播放“flap”声音。但是播放这个音频会导致一个小卡顿，使游戏不够流畅。如果我删除声音，则所有卡顿都会消失。卡顿只会在播放音频时出现，而不是在音频播放时。

音频设置：首先，我像这样设置了音频：

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() 影响 FPS

我使用以下方式检查FPS：

console.log(1/delta);

当触摸屏幕时，还要将“flapp”输出到控制台。

希望有人能对此进行解释！

最好的问候， Joakim

- JoakimNyland

Answer 1

问题在于您使用HTML5音频来制作交互式音效。该API并非旨在此目的上使用。相反，请使用基于Web Audio的类，如THREE.Audio或THREE.PositionalAudio，这些类允许声音效果没有延迟和适当的时机。

请参考以下链接了解更多信息：https://threejs.org/examples/#webaudio_timing 此外，还可以阅读以下指南以获取更多信息。其中指出： 时间控制精度高，延迟低，使开发人员能够编写对事件做出准确响应的代码...

- Mugen87

---

非常感谢，我会尝试的！ - JoakimNyland

更新：我现在已经实现了Three.Audio，所有的延迟都消除了！太棒了！非常感谢@Mugen87！ - JoakimNyland