[jPlayer] Audio tag "duration" property calculates to Infinity in Safari with certain headers

3,282 views
Skip to first unread message

Nate Haug

unread,
May 1, 2010, 12:44:25 AM5/1/10
to jPlayer: the CSS styleable jQuery audio player plugin
This is more a notification than a help request, but since it took me
hours and hours to figure it out, I thought I'd notify all the other
jPlayer users out there.

I was having a problem with Safari displaying the duration of mp3
files to NaN:NaN. After doing some debugging, I found that my audio
tag was returning "Infinity" when checking it with the following
jQuery:

$('#jplayer_player audio').get(0).duration

Which I couldn't figure out for the life of me why this didn't occur
on the demo page at http://www.happyworm.com/jquery/jplayer/latest/demo-01-oggSupportFalse.htm

Finally I found that the HTTP headers seem to be throwing off Safari.
The demo headers include:

Accept-Ranges:bytes
Connection:Keep-Alive
Content-Length:3350593
Content-Type:application/octet-stream
Date:Sat, 01 May 2010 04:38:53 GMT
Etag:"48319f7-332041-467a8fb0de0c0"
Keep-Alive:timeout=15, max=100
Last-Modified:Thu, 16 Apr 2009 09:49:31 GMT
Server:Apache/2.2

But my server headers (it's going through a PHP passthrough script)
are:

Cache-Control:store, no-cache, must-revalidate, post-check=0, pre-
check=0
Connection:Keep-Alive
Content-Length:3350593
Content-Type:audio/mpeg; name="01 All My Days.mp3"
Date:Sat, 01 May 2010 04:40:26 GMT
Expires:Sun, 19 Nov 1978 05:00:00 GMT
Keep-Alive:timeout=15, max=100
Last-Modified:Sat, 01 May 2010 04:40:26 GMT
Server:Apache/2.0.59 (Unix) PHP/5.2.5 DAV/2 mod_ssl/2.0.59 OpenSSL/
0.9.7l

It seems that the "Content-Type" header is responsible. When the
content type is "audio/mpeg" Safari is unable to calculate the
duration of files within audio tags. When the content type is
"application/octet-stream" (as in the demo), things work properly.
Seems mostly like a bug in Safari, but something to watch out for.

--
You received this message because you are subscribed to the Google Groups "jPlayer: the CSS styleable jQuery audio player plugin" group.
To post to this group, send email to jpl...@googlegroups.com.
To unsubscribe from this group, send email to jplayer+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jplayer?hl=en.

Maboa

unread,
May 2, 2010, 10:58:54 AM5/2/10
to jPlayer: the CSS styleable jQuery audio player plugin
Hi Nate,

That's useful to know. Thanks for posting back to the group.

Cheers

Mark B

On May 1, 5:44 am, Nate Haug <quickske...@gmail.com> wrote:
> This is more a notification than a help request, but since it took me
> hours and hours to figure it out, I thought I'd notify all the other
> jPlayer users out there.
>
> I was having a problem with Safari displaying the duration of mp3
> files to NaN:NaN. After doing some debugging, I found that my audio
> tag was returning "Infinity" when checking it with the following
> jQuery:
>
> $('#jplayer_player audio').get(0).duration
>
> Which I couldn't figure out for the life of me why this didn't occur
> on the demo page athttp://www.happyworm.com/jquery/jplayer/latest/demo-01-oggSupportFals...

Jordan Dobson

unread,
May 2, 2010, 2:38:22 PM5/2/10
to jpl...@googlegroups.com
This sounds a lot like some of the issues I was having with the iPad but perhaps it was the the way we did the pass through with PHP. Thanks for the info.

--
Jordan Dobson
(425) 444-8014

Mark P

unread,
May 3, 2010, 11:59:00 AM5/3/10
to jPlayer: the CSS styleable jQuery audio player plugin
I just did a test locally on Safari 4.0.5 (Win) and it appeared to
work fine with the "audio/mpeg" mime type.

Date: Mon, 03 May 2010 15:47:15 GMT
Server: Apache/2.2.8 (Win32) PHP/5.2.4
Last-Modified: Tue, 30 Jun 2009 17:59:32 GMT
Etag: "27000000019a08-332041-46d94919e8729"
Accept-Ranges: bytes
Content-Length: 3350593
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: audio/mpeg

One thing that caught my eye on your server response was:
Content-Type:audio/mpeg; name="01 All My Days.mp3"

In particular the bit:
name="01 All My Days.mp3"

Maybe you were using a different tool to get the response. I used
Firebug.

We have tested jPlayer with different MIME types in the past. We found
that the MP3 mime type did not matter at all, but the OGG MIME type
was very important. At least the OGG sub-type, where application/ogg
or audio/ogg both worked fine.

Best regards,
Mark P.

ps. Our mime type from Miaow music should be audio/mpeg too... That is
a bit of history there, where we fudged the mime type long ago so that
the Miaow site would offer the download rather than visit the mp3
directly and play in the quicktime plugin for the browser. I think it
is time we hosted those mp3/ogg on the happyworm site.


On May 2, 7:38 pm, Jordan Dobson <jordandob...@gmail.com> wrote:
> This sounds a lot like some of the issues I was having with the iPad but perhaps it was the the way we did the pass through with PHP. Thanks for the info.
>
> --
> Jordan Dobson
> (425) 444-8014
>
Reply all
Reply to author
Forward
0 new messages