HTML5 <audio> Safari live broadcast vs not
For the record, while both Pochang and Chris are correct that you need the Content-Range header to fix this problem in Safari, Chrome requires one extra header that must be included for setting currentTime to work properly:
header( 'Accept-Ranges: bytes');
Note that you don't actually have to respond correctly to the request's Range header, you just have to include this in the response.
Can you post the headers sent by the server both with and without the PHP script? I'm wondering if the PHP script is sending a different Content-Type than serving the files normally.
It would also be a good idea to specify the type attribute on the source elements, so the browser does not have to download both clips to determine if it can play them.
I cannot reproduce your problem. I have tried to recreate the problem in Safari 4.0.4, and the current WebKit nightly, with the following test page. I am simply using mod_rewrite to dispatch to different formats based on a parameter instead of PHP, but I don't think that should make a difference, unless somehow PHP is modifying the file.
<!DOCTYPE html>
<title>Auido test</title>
<audio controls autobuffer>
<source src="gnossienne-no-1?foo=bar&format=.mp4">
<source src="gnossienne-no-1?foo=bar&format=.ogg">
</audio>
Can you try my example out and let me know if it works for you?
edit Ah. After poking around at it a bit more, it appears that the problem is due to an odd way that the <audio> element in Safari behaves in attempting to determine the size of the content.
Here's an excerpt from a packet capture of Safari upon encountering an <audio> element pointing to a file served directly from Apache. As you can see, it first tries to fetch the first two bytes of the media, presumably so it can get a Content-Length back, and possibly other headers. It then tries to fetch the whole thing. Then, inexplicably, it tries to fetch the first two bytes again, but passes appropriate caching headers to get a "304 Not Modified" response. And finally, still inexplicably, it fetches the last 3440 bytes of the file all over again. It does all of these in separate TCP connections, which adds considerable overhead, in addition to the overhead of fetching the data a couple of times.
GET /stackoverflow/audio-test/say-noid3?foo=bar&format=.mp3 HTTP/1.1 Host: ephemera.continuation.org Range: bytes=0-1 Connection: close User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 Accept: */* Accept-Encoding: identity Cookie: [redacted] HTTP/1.1 206 Partial Content Date: Tue, 05 Jan 2010 02:12:48 GMT Server: Apache Last-Modified: Tue, 05 Jan 2010 02:02:08 GMT ETag: "b2a80ad-11f6-47c6139aaa800" Accept-Ranges: bytes Content-Length: 2 Content-Range: bytes 0-1/4598 Connection: close Content-Type: audio/mpeg # 2 bytes of data GET /stackoverflow/audio-test/say-noid3?foo=bar&format=.mp3 HTTP/1.1 Host: ephemera.continuation.org Range: bytes=0-4597 Connection: close User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 Accept: */* Accept-Encoding: identity Cookie: [redacted] HTTP/1.1 206 Partial Content Date: Tue, 05 Jan 2010 02:12:48 GMT Server: Apache Last-Modified: Tue, 05 Jan 2010 02:02:08 GMT ETag: "b2a80ad-11f6-47c6139aaa800" Accept-Ranges: bytes Content-Length: 4598 Content-Range: bytes 0-4597/4598 Connection: close Content-Type: audio/mpeg # 4598 bytes of data GET /stackoverflow/audio-test/say-noid3?foo=bar&format=.mp3 HTTP/1.1 Host: ephemera.continuation.org Range: bytes=0-1 Connection: close User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 Accept: */* Accept-Encoding: identity Cookie: [redacted] If-None-Match: "b2a80ad-11f6-47c6139aaa800" If-Modified-Since: Tue, 05 Jan 2010 02:02:08 GMT HTTP/1.1 304 Not Modified Date: Tue, 05 Jan 2010 02:12:49 GMT Server: Apache Connection: close ETag: "b2a80ad-11f6-47c6139aaa800" # no data GET /stackoverflow/audio-test/say-noid3?foo=bar&format=.mp3 HTTP/1.1 Host: ephemera.continuation.org Range: bytes=1158-4597 Connection: close User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 Accept: */* Accept-Encoding: identity Cookie: [redacted] HTTP/1.1 206 Partial Content Date: Tue, 05 Jan 2010 02:12:49 GMT Server: Apache Last-Modified: Tue, 05 Jan 2010 02:02:08 GMT ETag: "b2a80ad-11f6-47c6139aaa800" Accept-Ranges: bytes Content-Length: 3440 Content-Range: bytes 1158-4597/4598 Connection: close Content-Type: audio/mpeg # 3440 bytes of data
Anyhow, on to how it deals with the output of your PHP script. Here, Safari again tries to download the first two bytes, but your script ignores the Range request and returns the whole thing. Apparently, WebKit doesn't like that, and so it tries again, without the Range request. Again, your script sends the full contents. Safari now tries once more, adding an Icy-Metadata header, which indicates it thinks that it's downloading a stream and wants streaming metadata to be sent. It finally accepts the output of that, and the <audio> element can play.
GET /say.php?text=this%20is%20a%20test&format=.mp3 HTTP/1.1 Host: tts.mindtrove.info Range: bytes=0-1 Connection: close User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 Accept: */* Accept-Encoding: identity HTTP/1.1 200 OK Date: Tue, 05 Jan 2010 02:14:28 GMT Server: Apache X-Powered-By: PHP/5.2.10 Content-Length: 4598 Connection: close Content-Type: audio/mpeg # 4598 bytes of data GET /say.php?text=this%20is%20a%20test&format=.mp3 HTTP/1.1 Host: tts.mindtrove.info Connection: close User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 Accept: */* HTTP/1.1 200 OK Date: Tue, 05 Jan 2010 02:14:28 GMT Server: Apache X-Powered-By: PHP/5.2.10 Content-Length: 4598 Connection: close Content-Type: audio/mpeg # 4598 bytes of data GET /say.php?text=this%20is%20a%20test&format=.mp3 HTTP/1.1 Host: tts.mindtrove.info Accept: */* User-Agent: Apple Mac OS X v10.6.2 CoreMedia v1.0.0.10C540 Icy-Metadata: 1 Connection: close HTTP/1.1 200 OK Date: Tue, 05 Jan 2010 02:14:28 GMT Server: Apache X-Powered-By: PHP/5.2.10 Content-Length: 4598 Connection: close Content-Type: audio/mpeg # 4598 bytes of data
In summary, it appears that Safari (or more accurately, QuickTime, which Safari uses to handle all media and media downloading) has a completely braindamaged approach to downloading media. Something in the way you send your data back, probably the fact that you don't respond to Range requests, makes it think that you are sending streaming media, causing it to download the content repeatedly (though even when confronted with a server that does respond to a Range request, it still does several more requests than it really needs to).
My advice would be to try to respond appropriately to Range requests; when serving up media, browsers will likely use them to try to minimize bandwidth, by only buffering as much as they need to be able to play through (although have the autobuffer attribute which indicates that you would like them to buffer the whole thing, browsers may ignore that). I would recommend using X-Sendfile to let Apache deal with serving the file, caching, and range requests, but you appear to be on Dreamhost, which doesn't have mod_xsendfile installed, so you're going to have to roll your own Range handling.
I got the same problem. The key point is the Content-Range header. Everything works fine after I add it to the mp3-output php.
Old topic but still valid in 2019. We finally found a solution... Below PHP script sample will consider Safari's "Range" header request.
$bytes_total = strlen($data);
if (isset($_SERVER['HTTP_RANGE'])) {
$byte_range = explode('-',trim(str_ireplace('bytes=','',$_SERVER['HTTP_RANGE'])));
$byte_from = $byte_range[0];
$byte_to = ($byte_range[1]+1);
$data = substr($data,$byte_from,$byte_to);
header('HTTP/1.1 206 Partial Content');
}
else {
$byte_from = 0;
$byte_to = $bytes_total;
}
$length = strlen($data);
header('Content-type: '.$content_type);
header('Accept-Ranges: bytes');
header('Content-length: ' . $length);
header('Content-Range: bytes '.$byte_from.'-'.$byte_to.'/'.$bytes_total);
header('Content-Transfer-Encoding: binary');
print($data);