Current time: 04-24-2014, 06:32 AM Hello There, Guest! (LoginRegister)

html5 audio tag
09-25-2010, 11:30 AM
Post: #1
html5 audio tag
Here on DH, I am trying to stream audio from a lecture series using the <audio> tag in html5, but without much success. I am streaming ogg files (about 8 megs) and mp3 files ( about 13 megs ). Each file was exported from Audacity. The actual tag 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

For local development, I use a windows 7 machine running a win32 version of apache 2.2.14 and php 5.3.1. DH runs apache 2.2.15 and php 5.2.14.

Everything plays fine in FF, Chrome and Safari when served on my local machine. On DH, 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 DH 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 are appreciated. As far as I know, html5 audio is client-side technology, as is Silverlight. So, in theory, DH should have no effect on how the <audio> tag performs. Anyway, anyone have any ideas about what is amiss.

Thanks,

Chip Moore
Find all posts by this user
10-03-2010, 06:50 PM
Post: #2
RE: html5 audio tag
Well, the problem is with the ogg audio files. The mp3 files play fine both inside the <audio> tag (in Safari and Chrome) and in my Silverlight audio player (in Safari, Chrome, FF and IE). But DH is not handling the ogg files well. If I host the audio files on a non-DH server, the ogg files play correctly. This works:

<audio controls="controls" preload="auto" autoplay="autoplay">
<source src="http://nonDHserver/audio.ogg" type="audio/ogg" />
</audio>

This doesn't work:

<audio controls="controls" preload="auto" autoplay="autoplay">
<source src="audio.ogg" type="audio/ogg" />
</audio>

This does not look like a gzip or mime type problem. Gzip is currently turned off for my web site. Web-sniffer.org reports the correct mime type, "audio/ogg".

What is going on? Any ideas?

Chip Moore
Find all posts by this user
10-03-2010, 07:21 PM
Post: #3
RE: html5 audio tag
If I was going to take a wild guess, I'd say it's an Apache issue. Have you submitted a ticket to Support?

-Scott
Find all posts by this user
10-03-2010, 08:40 PM
Post: #4
RE: html5 audio tag
I have submitted a ticket to support, and several emails have passed between us, but the problem persists. This problem is a real fetter on mobile access.

I have looked over my apache error logs, but apache is not logging any errors on this issue. Apache does seem to be serving my audio stream. The progress bar on the client audio player shows the audio file being sent to FF and Chrome. But the file is being corrupted in transmission in some unknown manner, or, in any case, the player on the client cannot read the file after a few seconds of playback.

Chip Moore
Find all posts by this user
10-04-2010, 12:09 AM
Post: #5
RE: html5 audio tag
Well, I just completed some tests and it appears that only a short piece at the beginning of an ogg file is being sent to the client, and that piece is corrupt.

The test was executed with FF 3.5 on a 64 bit windows 7 machine. First, I cleared the FF cache and closed FF. I verified that the cache was empty in a commanad prompt window.

I opened FF and called my test file, test.php. Here is that code:

<!DOCTYPE html>

<html>
<head>
<title>audio</title>
</head>
<body>
<audio controls="controls" preload="auto" autoplay="autoplay">
<source src="audio/2010/test.ogg" type="audio/ogg"/>
</audio>
</body>
</html>

The test file, test.ogg, is a 5 meg music file. It streams correctly from apache localhost on my local machine in FF.

I opened test.php in FF. It loaded the html <audio> player and played almost one second of sound before stopping. The progress bar on the player showed the ogg file being sent, in total, to the client. Without closing FF or navigating from my test page, I opened a new FF tab and used the "about:cache" command to see the contents of the cache. It contained a single, 10kb file for my ogg music file. I copied the cache file to a local directory and opened it in "notepad" (with word wrap turned off). I also opened the original ogg file in notepad. The cache file contained the first 10 lines of the original ogg file and no more. Those ten lines were not identical to the first ten lines in the original file.

So any ideas on why DH is sending only a small chunk of an ogg file to the client, and why that chunk is corrupt. By the way, the mime type for the ogg file was correct, "audio/ogg".

Chip Moore
Find all posts by this user
10-06-2010, 11:47 AM
Post: #6
RE: html5 audio tag
Problem solved. FTP transfer type was set to ascii, not binary, in Filezilla. Ogg files were corrupted on upload. So why were the mp3 files okay?

Chip Moore
Find all posts by this user
10-06-2010, 12:10 PM
Post: #7
RE: html5 audio tag
My guess would be that Filezilla automatically switches to binary mode for files it knows are binary (like mp3), but uses the default mode (ASCII) for ones it doesn't recognize (like, say, ogg).
Find all posts by this user
10-06-2010, 05:12 PM
Post: #8
RE: html5 audio tag
Now my question is why did it work on the non-DH domain?

-Scott
Find all posts by this user


Forum Jump: