Delay in JavaScript audio playback

Question

I am writing a very simple game in JavaScript and I notice that there is about a 0.5 seconds delay from the time that I call the "play" function to the time the audio starts playing. Is this normal?

This is the code I have:

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

I have also tried initializing the audio variable only once, and then just calling audio.play() (after doing audio.currentTime = 0, of course), and the delay is still there!

Am I doing anything wrong? (I'm trying this on Safari, btw).

Edit: after experimenting with this, it seems that the problem is just running this on Safari. There is no delay on Chrome. But that still leaves the question of why does it happen in Safari?!?!

Edit 2: it seems it might be related to this other question: HTML5 Audio tag on Safari has a delay

Answer 1

When you hit the "Play" button (whether you do it manually or in code) a network request is issued to obtain the audio. While it can start before the full file is downloaded, it needs to download a reasonable amount into the buffer before it can start - otherwise it would stutter badly as it tried to play.

You can hint to the browser that you would like the audio pre-loaded with:

<audio preload="auto"> 

But that is simply a hint, it won't guarantee anything. If you use this attribute too liberally it may be counter-productive.

With your JavaScript solution, you could instantiate the audio earlier. There is an oncanplaythrough event that fires when it has buffered enough to play.

Answer 2

I had the same time delay problem in chrome with noises for the character running. I added preload='auto' to the audio tag, but since preload is a browser hint and not a command, I made it call the .load() function on rendering so it would be ready to go when I trigger the keypress event. My game was setup in React, so I threw it in a useEffect, but if you're using vanilla JS, I would imagine setting the .load() for your audio in a DOMContentLoaded event listener would do the same thing.

Answer 3

I do not experience this but I structure mine a little differently. In my html file I have an audio tag:

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

I would then create a javascript function to call that sound.

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

and call that function when I want the sound to play. Works for me without any type of delay.

Answer 4

There is delay in getting the file by making a request & waiting till the completion of getting the file.... One work around would be to call the .wav file on page load by calling ajax... cache that response

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

Use the #source to .play()