HTML5 Audio files fail to load in Safari

Question

[EDIT: using a simplified test page without Javascript etc.]

I've got a webpage that contains four audio files. These files are served as HTML5 <audio> with .mp3 files, which should play in Safari. (I've had no trouble with .ogg files in Firefox and Chrome.)

Each time I reload the page, between one and three of the files load properly, and the rest fail to load -- although they don't give an error, and the 'loading' message disappears; it's as if they're loading with a size of 0B. Which files work and which don't seems completely random: I've seen each of them load and each of them fail more than once.

How can I make all these files load properly?

I'm having this exact same issue; I'm completely baffled by it. — Scott Christopherson
Were you able to solve this? I am facing exact same issue. Even if I reload the audio on stalled event it keeps stalling non-stop again and again. It will never pay more than a couple of second. — Kolyunya
It may be of help to know that Safari seems to require file extensions for media requests. The correct mime type (in the audio element and in the response) is not enough have it load the resource. — pwray

Scott Christopherson Scott Christopherson · Accepted Answer · 2010-12-15T06:04:19

I was having a similar issue with files not loading and came up with this solution. It seems that HTML5 audio/video can "stall", meaning that is just stops loading. Luckily, there's a "stall" event that fires when this happens. What I did was listen for this event and when/if it fires, just try to force the audio to load again.

Example using jQuery:

    // the event is 'onstalled' - 'stalled' in the jquery case
   $("audio").bind("stalled", function() { 
        var audio = this;
        audio.load();

        // Threw in these two lines for good measure.
        audio.play();
        audio.pause();
    });

HTML5 Audio files fail to load in Safari

2 Answers