HTML5 <audio> Safari live broadcast vs not

Asked 3/1, 2010 at 17:19 Answered 3/7, 2020 at 3:8

I'm attempting to embed an HTML5 audio element pointing to MP3 or OGG data served by a PHP file . When I view the page in Safari, the controls appear, but the UI says "Live Broadcast." When I click play, the audio starts as expected. Once it ends, however, I can't start it playing again by clicking play. Even using the JS API on the audio element and setting currentTime to 0 fails with an index error exception.

I suspected the headers from the PHP script were the problem, particularly missing a content length. But that's not the case. The response headers include a proper Content- Length to indicate the audio has finite size. Furthermore, everything works as expected in Firefox 3.5+. I can click play on the audio element multiple times to hear the sound replay.

If I remove the PHP script from the equation and serve up a static copy of the MP3 file, everything works fine in Safari.

Does this mean Safari is treating audio src URLs with query parameters differently than URLs that don't have them? Anyone have any luck getting this to work?

My simple example page is:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <audio controls autobuffer>
      <source src="say.php?text=this%20is%20a%20test&format=.ogg" />
      <source src="say.php?text=this%20is%20a%20test&format=.mp3" />
    </audio>
  </body>
</html>

HTTP Headers from PHP script:

HTTP/1.x 200 OK
Date: Sun, 03 Jan 2010 15:39:34 GMT
Server: Apache
X-Powered-By: PHP/5.2.10
Content-Length: 8993
Keep-Alive: timeout=2, max=98
Connection: Keep-Alive
Content-Type: audio/mpeg

HTTP Headers from direct file access:

HTTP/1.x 200 OK
Date: Sun, 03 Jan 2010 20:06:59 GMT
Server: Apache
Last-Modified: Sun, 03 Jan 2010 03:20:02 GMT
Etag: "a404b-c3f-47c3a14937c80"
Accept-Ranges: bytes
Content-Length: 8993
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: audio/mpeg

I tried hard-coding the Accept-Ranges header into the script too, but no luck.

Reeder answered 3/1, 2010 at 17:19 Comment(1)

I'm not sure if you you get notified about edits, but I've edited my answer to include a test case that works for me, and seems to match what you're doing. Can you check if my test case works for you as well? – Masera 4/1, 2010 at 15:20

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.

Masera answered 3/1, 2010 at 19:24 Comment(9)

Added the headers to the original question as they wouldn't fit in a comment. I had type specified originally, but took it out in case it was causing a problem. Adding them back for good measure, but with no change to the broken behavior in Safari. – Reeder 3/1, 2010 at 20:15

Your example works for me. So the only factor seems to be the PHP script. Interesting. I posted a demo of my code at tts.mindtrove.info/test.html. The source of PHP file is visible at tts.mindtrove.info/say.php.txt. The static audio files are at tts.mindtrove.info/cache. The only thing I see in the PHP script that might be troublesome now is the use of passthru("cat $fn"). But with a Content-Length and forced exit() at the end of the script, I'm not sure why Safari / WebKit would treat the audio as a never ending stream. – Reeder 5/1, 2010 at 0:51

Excellent help. Thanks for taking the time to work through this with me. Your findings might be ripe for a bug report, though I'm sure Apple will simply say the PHP script needs Range handling. It might be nice if they documented it somewhere though. – Reeder 5/1, 2010 at 13:31

I had problems with safari and audio as well. your test page does not work on the lastest release (safari v5.0.2 for windows 7). Do you happen to know if ipod safari supports audio? if so i may attempt to get this working – Devastation 6/11, 2010 at 21:59

@Peter Parente: i am having trouble as well. Your test page and Brians does not work for me (safari v5.0.2 for windows 7) – Devastation 6/11, 2010 at 22:1

This is still an issue. :( – Favourite 23/6, 2015 at 4:21

Wow this issue is now, 6 years later, still present in safari on iOS 9.2. Thanks for your clear answer. Saved me a day of frustration. – Balder 25/1, 2016 at 0:17

Brian and @DirkdeBoer, can you please look at my simple code at #54739375 and see if I'm not doing what you suggest? I'd really appreciate your advice. Thanks! – Hast 18/2, 2019 at 0:3

This was really helpful and i proposed this as answer for my stack overflow question #55831009 – Suite 3/5, 2019 at 9:22

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

Motherly answered 19/11, 2019 at 10:44 Comment(1)

This will return 3 bytes to Range:0-1 request since you're adding +1 to byte_to. Will it not? Anyway, your suggested solution does not work for me - still seeing Live Broadcast in Safari. Did you test the above in Safari? – Highland 13/1, 2020 at 3:33

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.

Amarillo answered 11/12, 2011 at 20:19 Comment(0)

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.

Communicable answered 15/5, 2010 at 8:17 Comment(0)

Pochang is correct. Including a Content-Range header in the PHP response will cause Safari to behave properly. It also allows seeking (media.currentTime = 0;) without the dreaded INDEX_SIZE_ERR in Safari, though not in Chrome.

The PHP code for the header is:

$len = strlen( $data );
$shortlen = $len - 1;
header( 'Content-Range: bytes 0-'.$shortlen.'/'.$len);

Leavings answered 21/7, 2010 at 15:21 Comment(1)

What are the variables here exactly??? Is $data your music file? Where is $length coming from? – Sandoval 30/12, 2011 at 6:9

And in 2020 it is still actual question.

Simply adding Content-Range header does not work.

Bellow is my implementation(based on some answers here).

        $content_length = strlen($media_total);
        $total_bytes = $content_length;
        $content_length_1 = $content_length - 1;

        if (isset($_SERVER['HTTP_RANGE'])) {

            $byte_range = explode('-',trim(str_ireplace('bytes=','',$_SERVER['HTTP_RANGE'])));

            $byte_from = $byte_range[0];
            $byte_to = intval($byte_range[1]);
            $byte_to = $byte_to == 0 ? $content_length_1 : $byte_to;

            $media_total = substr($media_total,$byte_from,$byte_to);

            $content_length = strlen($media_total);

            header('HTTP/1.1 206 Partial Content');
        }
        else {
            $byte_from = 0;
            $byte_to = $content_length_1;
        }

        $content_range = 'bytes '.$byte_from.'-' . $byte_to . '/' . $total_bytes;

        header('Accept-Ranges: bytes');
        header("Content-Range: ".$content_range);
        header("Content-type: ".$type);
        header("Content-length: ".$content_length);
        header('Content-Transfer-Encoding: binary');

        echo $media_total;

        exit;

Original question here: Timing problem for generated audio in some browsers

Barbaric answered 3/7, 2020 at 3:8 Comment(1)

Hi, where should this snippet of code be added to? Thanks – Hexamerous 13/10, 2021 at 8:39

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags