8

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

Gabriel Roth
  • 1,030
  • 1
  • 12
  • 31
  • 1
    I'm having this exact same issue; I'm completely baffled by it. – Scott Christopherson Dec 13 '10 at 07:52
  • 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 Oct 16 '14 at 05:41
  • 1
    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 Apr 21 '16 at 05:15

2 Answers2

11

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();
    });
Brigham
  • 14,395
  • 3
  • 38
  • 48
Scott Christopherson
  • 592
  • 5
  • 14
0

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

  • Thanks for the reply. I've reversed the order of file types, and it doesn't make a difference. I'll try using m4a files, but it's really not clear why I should have to, since Safari theoretically supports mp3 files, and some of them work fine. – Gabriel Roth Nov 17 '10 at 15:08