HTML5 Audio files fail to load in Safari

问题:

[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?

回答1:

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();
    });

回答2:

Looking at generated source of your page you load as first source an ogg file then a mp3 file in this exact order

But, as specified in http://html5doctor.com/native-audio-in-the-browser/ file are in inverse order, so try to do the same

otherwise try to serve in your sources also an aac audio in a m4a/mp4 container