I have been working on a jquery plugin that uses a HTML5 audio player () to play back mp3’s. I noticed that in various browsers multiple GET requests were made for the same MP3 file when the audio player was loaded.
I created a simple standalone HTML file to test this out.
<html>
<head></head>
<body>
<audio controls src="http://localhost:5000/files/one.mp3" type="audio/mp3"></audio>
<body>
<html>
When opening the page in OS X Safari 5.0.1, I saw the following logs from my web server (3 GET requests):
>> Thin web server (v1.2.7 codename No Hup)
>> Maximum connections set to 1024
>> Listening on 0.0.0.0:5000, CTRL+C to stop
127.0.0.1 - - [17/Aug/2010 11:09:32] "GET /one.mp3 HTTP/1.1" 200 4030432
0.0022
127.0.0.1 - - [17/Aug/2010 11:09:32] "GET /one.mp3 HTTP/1.1" 200 4030432
0.0012
127.0.0.1 - - [17/Aug/2010 11:09:32] "GET /one.mp3 HTTP/1.1" 200 4030432
0.0010
Note, the requests are for “GET /one.mp3” and not “GET /files/one.mp3” because my Thin web server is running off a prefix of /files.
When opening the same HTML file in OS X Chrome, I saw 2 GET requests for /one.mp3.
When opening the same HTML file in OS X Opera, I saw 1 GET request for /one.mp3.
What is the reason for the multiple GET requests for a single files? The bandwidth on my server is limited and I throttle connections at 75KB/s (thats HTTP connection, not user). My worry is if Safari is making 3 HTTP connections to download (stream) a single mp3 file, it will reduce the number of concurrent users my server can handle.
Is this something I should be worried about in terms of performance/bandwidth? Also, I am curious as to why certain browsers make multiple requests for the same file, while other do not.
Is it possible that Safari is making additional requests to fetch metadata? Try different values of the preload attribute to see if it makes any difference:
See http://dev.w3.org/html5/spec/Overview.html#attr-media-preload for a full description of this attribute.