Audio files on server embed in broken ways

Question

I am using jPlayer to embed two audio files in my page, basically the code is cut'n'pasted from this page. One is a wav, the other an mp3. Everything works fine staged locally (mac), but when I upload it to the server, the audio files fail in odd ways.

Chrome starts the wav file 30 seconds in—even though the location scrubber starts from the beginning—and ends early, so I suspect the javascript gets the correct length of the sound file regardless. The mp3 never even starts playing. It pretends to load, but then it doesn't.

Safari works fine, somehow.

Firefox plays fine, too. Maybe because it falls back on the flash option of the players?

IE8 plays the mp3, but not the wav, and fails to display the progress bar for the former.

I thought at first it was an issue with how I uploaded the files. Initially I had used Transmit, which ought to be wise about ascii vs binary. I tried scping the files, but they were still acting screwy.

I thought then maybe the mime type was not correctly set, so I added two lines to the .htaccess file in my assets folder, but that changed nothing. Here's what the htaccess file looks like, maybe I forgot something that I also need to include?

# prevent CGI and PHP executing in assets; php_flag doesn't actually do anything
# since lower-level settings trump any attempt to turn it off in htaccess.
# I'll leave it here for posterity.
deny from all
Options -ExecCGI
php_flag engine 0 

# Break other files
<Files ~ "\.(gif|GIF|jpe?g|JPE?G|png|PNG|docx?|DOCX?|pdf|PDF|swf|SWF|flv|FLV|ppt|PPT|pps|PPS|mp3|MP3|wav|WAV)$">
order deny,allow
allow from all
</Files>

AddType audio/x-wav wav
AddType audio/mpeg mp3

Ideas?

EDIT: I tried changing the mime type to application/octet-stream for both wav and mp3 and that didn't seem to do anything to the player application; if I linked directly to the audio files, it would download them.

Can you post the URL of where you actually have this hosted? — Brad
StackOverflow posts are so everyone can learn from them. If you send the link just to one person, nobody else can learn. I suspect that your server isn't support range headers, or some other issue. You can use Fiddler (fiddler2.com/fiddler2) to help you debug, but without a URL to go to, it is difficult to assist. Can you work up a test case, independent of your site? — Brad

Brad Brad · Accepted Answer · 2011-03-14T19:01:29

Ok, so there are numerous problems. The first is, you are streaming a WAV file. While I understand that not all HTML5 players will handle MP3, you should really consider MP3.

The second problem is that your player has bugs. The progress bar assumes that the audio is still playing when it has stalled. It only corrects itself once the audio begins playing again. Do yourself a favor, and use a simple Flash-based MP3 player. I know this is blasphemy, but at this point, you really will have more users that can use it, and MP3 is guaranteed to work.

The third problem is lack of bandwidth with your ISP. I'm sitting on a very large pipe right now, and it took 1:51 to download your 4MB WAV file. I also tested it on a second connection. WAV is uncompressed, and will take a lot of bandwidth.

Fourth, your web server isn't liking ranges so much, and your audio player isn't making the right range requests anyway. It is requesting the last byte of the file onward, and your web server isn't returning any error at all, and is simply closing the connection. Perhaps this is expected behavior, I'm not certain, but I doubt it.

I am quite confident that if you use one of the many Flash-based audio players, and use MP3s, that your troubles will go away.

Audio files on server embed in broken ways

1 Answers