使用html5流式传输音频` <audio> `标签

Question

I am trying to stream audio on a site hosted by Dreamhost from a lecture series using the <audio> tag in html5, but without much success. The actual code is

<audio id="playerTwo" class="player" controls="controls" preload="none">
<source src="audio.ogg" type="audio/ogg; codecs='vorbis'"/>
<source src="audio.mp3" type="audio/mpeg"/>
</audio>

I also have an .htaccess file to include the correct mime-types for apache.

AddType audio/ogg .ogg

AddType audio/mpeg .mp3

The ogg files are about 8 megs and mp3 files are about 13 megs. Each file was exported from Audacity.

Everything plays fine in FF, Chrome and Safari when served locally on my windows 7 machine (running a win32 version of apache 2.2.14 and php 5.3.1).

Things do not go so well on Dreamhost. (They run apache 2.2.15 and php 5.2.14.) FF stops playing the audio file after 5 seconds. Chrome plays the audio file, but the audio skips frequently. Safari plays the audio correctly, but the lag between clicking the play button and the audio actually starting to stream and play is about three minutes.

If instead of using the <audio> tag, I play the mp3 files from Dreamhost with a Silverlight player, they stream and play correctly.

Any suggestions about what I need to do to get the <audio> tag to work correctly. As far as I know, html5 audio is client-side technology, as is Silverlight. So, in theory, Dreamhost should have no effect on how the <audio> tag performs.

Anyway, anyone have any ideas about what is amiss.

Thanks.

Answer 1

Problem caused by uploading audio files through filezilla in ascii transfer type, rather than binary transfer type. The audio files were corrupted during upload, so no big surprise that they didn't play well. The surprise is that the mp3 files did play acceptably, though the ogg files did not.

That's the answer here.