Question

我正在用JavaScript编写一个非常简单的游戏，我注意到从我调用“播放”功能到音频开始播放的时间有大约0.5秒的延迟。这是正常的吗？

这是我的代码：

var audio = new Audio("games/aventura4/sfx/hit.wav");
audio.play();

我也尝试过初始化音频变量一次，然后只调用audio.play（）（当然，在做audio.currentTime = 0之后），延迟仍然存在！

我做错了吗？（我在Safari上尝试这个，顺便说一下。）

编辑：在尝试了这个之后，似乎问题就是在Safari上运行它。 Chrome没有延迟。但这仍然留下了为什么它会在Safari中发生的问题？！？！

编辑2：似乎可能与其他问题有关：HTML5 Audio tag on Safari has a delay

Answer 1

当您点击“播放”按钮（无论是手动还是代码）时，都会发出网络请求以获取音频。虽然它可以在下载完整文件之前启动，但它需要在启动之前将合理的数量下载到缓冲区中 - 否则它会在尝试播放时出现严重问题。

您可以向浏览器提示您希望预先加载的音频：

<audio preload="auto">

但这仅仅是一个提示，它不能保证任何东西。如果你过于宽松地使用这个属性，那么它可能适得其反。

使用JavaScript解决方案，您可以更早地实例化音频。有一个oncanplaythrough事件在缓冲足以播放时会触发。

Answer 2

我没有遇到这种情况，但我的结构有点不同。在我的html文件中，我有一个音频标签：

<audio id="hitSound" src="games/aventura4/sfx/hit.wav""></audio>

然后我会创建一个javascript函数来调用该声音。

function playHitSound() {
   document.getElementById("hitSound").play();
}

当我想播放声音时调用该功能。对我来说没有任何延迟。

Answer 3

通过提出请求获取文件有延迟＆amp;等到完成获取文件....一个解决方法是通过调用ajax ...缓存响应来调用页面加载上的.wav文件

$.ajax({
            url: 'games/aventura4/sfx/hit.wav', 
             cache: true,           
            success: function( data ) {               
                $('audio #source').attr('src', data);  //store it in some ID
           }

使用#source到.play（）

JavaScript音频播放延迟

3 个答案: