html5 audio stalls indefinitely on latent connections
We have a web application that serves audio through a fancy interface. We've recently moved from a quicktime-based solution to an HTML5-based one but are still having problems getting safari (in both OSX and Windows) to behave and play correctly. We've reduced the problem to a very basic issue: Safari audio stream downloads repeatedly "stall" and don't seem to ever recover when the connection is even moderately latent, for example when the server is in the US and the end user is in Europe. The problem appears more likely to occur when traversing an https/SSL link.
The set up is trivial - even a simple html audio tag with a single source can result in the problem. I've added javascript handlers to most of the implicated events. Also, as suggested elsewhere, I catch the stalled event and do an explicit load(). When things are working, the console indicates the sequence "loadstart, durationchange, loadedmetadata, progress, suspend, canplay, canplaythrough". When it is going to fail, we instead get stuck in a continuous loop of stalled events where the explicit load may progress or might not before stalling again. I'd like to reiterate that when relatively local it works fine, when the web browser isn't Safari it works fine.
The basic html is:
<html> <head> <meta charset="utf-8"> </head> <body> <h1>HTML5 Audio player</h1> <div> <audio controls> <source type="audio/wav" src="wavtest.wav"> </audio> </div> <script type="text/javascript"> var tag = document.getElementsByTagName('audio')[0]; tag.addEventListener('stalled', function() { console.log('stalled'); tag.load(); console.log('Force Load'); }, false); </script> </body>
</html>
OSX Safari v 8.0.3 (10600.3.18) - Yosemite
Windows Safari v 5.1.7 (7534.37.2) - Windows 7
Thanks
PS. I have a minimal demo page deployed on my home machine - I'd rather not publish it as part of this message, but I'm happy to pass it along to people who might want to try debugging.
MacBook Pro with Retina display, OS X Yosemite (10.10.1)