[jPlayer] jPlayer and audio streams

997 views
Skip to first unread message

Mark P

unread,
May 6, 2010, 7:04:58 AM5/6/10
to jPlayer: the CSS styleable jQuery audio player plugin
Hello jPlayer group,

After receiving a few emails about audio streaming and seeing an
example of a project that successfully uses jPlayer with an MP3
stream, I have turned my eye to streaming for the moment.

Project in question:
http://radiosonar.co.uk/listen.php

Developer's blog post on Radio Sonar and jPlayer:
http://www.georgebuckingham.net/blog/2010/04/16/jplayer-the-best-jquery-plugin/

My first problem was to find an internet radio station that streamed
MP3 and OGG formats. After looking around a bit, I soon found:
http://www.absoluteradio.co.uk
http://www.absoluteradio.co.uk/listen/on_your_computer.html

I got the OGG stream to work straight away in Firefox... After
downloading the PLS file and reading the OGG stream URL and popping it
into the setFile OGG parameter.

The MP3 stream was a shoutCast stream... This took me a while to
figure out how to get hold of the actual MP3 audio stream. Using the
URL in the PLS file just gave an HTML page.
http://mp3-vr-128.as34763.net:80/

It then took a while to find out how to actually get hold of the MP3
stream from the URL. Just about when I was ready to give up... After
reading one of those forums about 1 mile long, I decided to take a
stab in the dark and try slapping a ";stream/1" at the end of the URL
given in the MP3 PLS file. I punched the air when it actually worked!
http://mp3-vr-128.as34763.net:80/;stream/1

So, I have now tried jPlayer to see how it works with audio streams.
The Flash seems to work fine with the MP3 stream in all browsers. I
did have to remove the Stop button and progress bars from my test
interface, since the progress bar did nothing and the stop button
actually screwed up the stream and stopped the player working until
you reloaded the page.

Testing with HTML5 support has been varied:

Firefox 3.6 worked with the OGG stream, but has a blip and pause at
the start. After about 10 seconds, play continues. Maybe the browser
is caching the audio? (Firefox only supports OGG format natively.)

Opera 10.5 worked with the OGG stream. After a while, the audio did
start blipping until I paused for a few moments. Maybe the instant
playing did not give enough for a buffer? (Opera only supports OGG
format natively.)

Safari 4 did NOT work with the MP3 stream. (Safari 4 only supports MP3
format natively.)

Chrome 4 did NOT work with the OGG stream at all. Nor did Chrome 4
work with the MP3 stream. (Chrome 4 supports both MP3 and OGG format
natively.)

So, as Radio Sonar found, if you want to use jPlayer with audio
streams, you must have an MP3 stream and force the Flash using
{nativeSupport:false}

Until browsers develop the HTML5 audio support to a higher level,
using the Flash fallback will be the only method that works.

I understand that to work with streams, without killing people's
computers, the stream needs to be reset every 100MB or so. I will be
looking into a change for the SWF file that takes this into account.

If anyone has anything to contribute on this topic, then please speak
up.

Best regards,
Mark P.

--
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.

Jonathan2

unread,
May 6, 2010, 7:50:45 AM5/6/10
to jPlayer: the CSS styleable jQuery audio player plugin
Mark;

Thanks for this informative post. I've bookmarked it, and the hint
about ";stream/1" is very useful!

It seems such a shame that so many of these projects have to force
flash, and WHY do Firefox and Opera choose to only support ogg
natively?
It's like Steve Jobs not only preventing the use of flash, but going
so far as preventing people using the tools which turn flash into a
native format.

When groups remove user choice because someone want to push their
favourite quirky codec, we all lose out. Wikipedia's "spoken version"
has pretty much fallen by the wayside because they force people to
use .ogg, and how many iPod style players use ogg these days?

I'm all for alternatives to Flash, but unless the browser developers
get on board and make html5 audio support reliable AND include more
formats as standard, it's only going be longer before people can stop
reverting to flash, as they have to do in your article.

On May 6, 12:04 pm, Mark P <mark.panaghis...@gmail.com> wrote:
> Hello jPlayer group,
>
> After receiving a few emails about audio streaming and seeing an
> example of a project that successfully uses jPlayer with an MP3
> stream, I have turned my eye to streaming for the moment.
>
> Project in question:http://radiosonar.co.uk/listen.php
>
> Developer's blog post on Radio Sonar and jPlayer:http://www.georgebuckingham.net/blog/2010/04/16/jplayer-the-best-jque...
>
> My first problem was to find an internet radio station that streamed
> MP3 and OGG formats. After looking around a bit, I soon found:http://www.absoluteradio.co.ukhttp://www.absoluteradio.co.uk/listen/on_your_computer.html
>
> I got the OGG stream to work straight away in Firefox... After
> downloading the PLS file and reading the OGG stream URL and popping it
> into the setFile OGG parameter.
>
> The MP3 stream was a shoutCast stream... This took me a while to
> figure out how to get hold of the actual MP3 audio stream. Using the
> URL in the PLS file just gave an HTML page.http://mp3-vr-128.as34763.net:80/
>
> It then took a while to find out how to actually get hold of the MP3
> stream from the URL. Just about when I was ready to give up... After
> reading one of those forums about 1 mile long, I decided to take a
> stab in the dark and try slapping a ";stream/1" at the end of the URL
> given in the MP3 PLS file. I punched the air when it actually worked!http://mp3-vr-128.as34763.net:80/;stream/1

Mark P

unread,
May 6, 2010, 8:17:12 AM5/6/10
to jPlayer: the CSS styleable jQuery audio player plugin
Note that my tests were performed on a PC. Win XP to be specific.

I understand that Safari 4 on the Mac does work with audio streams.
Maybe some others out there can test it... Ah, I'll have to put the
demos up.

{nativeSuport:true,oggSupport:true}
http://www.happyworm.com/jquery/jplayer/1.1.1/demo-08.htm

{nativeSuport:true,oggSupport:false}
http://www.happyworm.com/jquery/jplayer/1.1.1/demo-08-oggSupportFalse.htm

{nativeSuport:false,oggSupport:false}
http://www.happyworm.com/jquery/jplayer/1.1.1/demo-08-nativeSupportFalse.htm

I did not worry about the styling of the player and I just cut the
bits out from the single player, demo 1. Nor did I change the text
much.

Best regards,
Mark P.
> > MP3 and OGG formats. After looking around a bit, I soon found:http://www.absoluteradio.co.ukhttp://www.absoluteradio.co.uk/listen/o...

Onyx

unread,
May 6, 2010, 5:02:38 PM5/6/10
to jpl...@googlegroups.com
Hi Mark,

I am happy to hear you looked into the capabilities of streaming audio
with jPlayer and might be looking it further down the road. I, like
George (of Radio Sonar's work), had successfully gotten jPlayer to
work with streaming audio for a side project I have been working on.
In my efforts & experimentation, I too had found that HTML5 support is
just not there yet across browsers, and decided to have jPlayer force
the use of Flash to get my stream to play in all browsers.

With this kind of setup though, I can testify that the Flash player
within jPlayer will crash after an extended period of time of playing
a stream. As you alluded to, I believe the Flash player's
memory/buffer needs to be flushed every once in a while to resolve
this. If it may help you on your quest to address this within
jPlayer, I believe the developer(s) of the FFMp3 project
(http://ffmp3.sourceforge.net/), a streaming audio Mp3/OGG Flash
player, have figured out a solution to this problem.

While on the streaming jPlayer topic, I have one question/request.
MP3 streams include metadata which usually contains the stream title
and current song information. This is evident when you play a MP3
stream in a music client such as iTunes, and have that information
displayed in the window near the top. Is it possible to extract that
information and expose it through jPlayer?

Thanks for writing about this!

Onyx M.

Jordan Dobson

unread,
May 6, 2010, 7:36:42 PM5/6/10
to jpl...@googlegroups.com
All three versions worked for me on my mac in Safari Version 4.0.5 (6531.22.7)

Trying on the ipad now.
--
Jordan Dobson
Owner + Director
MadeBySquad.com | GlueNow.com | SquadBlog.com
(425) 444-8014

Follow me on twitter at http://Twitter.com/JordanDobson

Jordan Dobson

unread,
May 6, 2010, 7:42:56 PM5/6/10
to jpl...@googlegroups.com
On the iPad the first two work:

{nativeSuport:true,oggSupport:true}
{nativeSuport:true,oggSupport:false}

This version, rightfully so, did not work:
{nativeSuport:false,oggSupport:false}


I did have to hit the pause button then the play button to start it.
But I think that's the issue with the autostart on the iPad. Otherwise
it worked great! Hope that helps.

- Jordan

On Thu, May 6, 2010 at 5:17 AM, Mark P <mark.pan...@gmail.com> wrote:
--
Jordan Dobson
Owner + Director
MadeBySquad.com | GlueNow.com | SquadBlog.com
(425) 444-8014

Follow me on twitter at http://Twitter.com/JordanDobson

Trygve Lie

unread,
May 10, 2010, 6:59:28 AM5/10/10
to jPlayer: the CSS styleable jQuery audio player plugin
Hi

I'm working on a "demo" of a radio player based on jPlayer where I use
Ogg and Mp3 streams.

> My first problem was to find an internet radio station that streamed
> MP3 and OGG formats.

Some of the radio channels at The Norwegian Broadcasting Corporation
are streamed in both Ogg and Mp3 from a University here in Norway. I
use these for my demo player and have put some (only one quality level
at this moment) of the streams into a json feed. Feel free to use
those: http://github.com/trygve-lie/widget-nrk-radio/blob/master/src/main/webapp/feeds/nrk.json

These streams are Icecast streams.

I'm still very early in the process of this demo so I have not tested
widely but Opera 10.5x plays the Ogg stream without any problems.
FireFox 3.6.x uses the Mp3 stream and at start is "blips", then goes
silent for 10sec and then starts playing. Safari on Mac plays the Mp3
stream right away. Safari on Win does not. Chrome does not want to
play any of the streams.
I'll do some more testing in the next days.

Best regards
Trygve Lie
http://www.trygve-lie.com/
@trygve_lie

Mark P

unread,
May 11, 2010, 4:59:15 PM5/11/10
to jPlayer: the CSS styleable jQuery audio player plugin
Thank you all for the feedback.

@Onyx: The data that I think you are referring to is included in a
different type of file that the applications such as iTunes, WinAmp
and RealPlayer use to connect to streams. These are PLS files and
contain data like this one for the Absolute Radio MP3 stream:

[playlist]
NumberOfEntries=2
File1=http://mp3-vr-128.as34763.net:80/
Title1=Absolute Radio 1215AM, Discover Real Music
Length1=-1
File2=http://network.absoluteradio.co.uk/core/audio/mp3/problems.mp3
Title2= -
Length2=20
Version=2

I'm not sure how to get hold of any metadata sent with the streams.
Flash would have problems if the stream's domain did not have a
crossdomain.xml policy file, since I understand Flash cannot access
data such as ID3 tag info from remote sites without permission. They
can get the actual audio data though, since this is treated as media
rather than pure data.

Does anyone have any knowledge on this topic of metadata in the
streams and how to access it?

Best regards,
Mark P




On May 10, 11:59 am, Trygve Lie <p...@trygve-lie.com> wrote:
> Hi
>
> I'm working on a "demo" of a radio player based on jPlayer where I use
> Ogg and Mp3 streams.
>
> > My first problem was to find an internet radio station that streamed
> > MP3 and OGG formats.
>
> Some of the radio channels at The Norwegian Broadcasting Corporation
> are streamed in both Ogg and Mp3 from a University here in Norway. I
> use these for my demo player and have put some (only one quality level
> at this moment) of the streams into a json feed. Feel free to use
> those:http://github.com/trygve-lie/widget-nrk-radio/blob/master/src/main/we...
>
> These streams are Icecast streams.
>
> I'm still very early in the process of this demo so I have not tested
> widely but Opera 10.5x plays the Ogg stream without any problems.
> FireFox 3.6.x uses the Mp3 stream and at start is "blips", then goes
> silent for 10sec and then starts playing. Safari on Mac plays the Mp3
> stream right away. Safari on Win does not. Chrome does not want to
> play any of the streams.
> I'll do some more testing in the next days.
>
> Best regards
> Trygve Liehttp://www.trygve-lie.com/

Maboa

unread,
May 27, 2010, 4:04:45 AM5/27/10
to jPlayer: the CSS styleable jQuery audio player plugin
This is the current state of play with Chrome and audio streams.
http://code.google.com/p/chromium/issues/detail?id=40344 The issue has
been flagged up several time so hopefully they will do something about
it soon.

Also Trygve blogged about the various levels of browser support here :
http://www.trygve-lie.com/blog/entry/html_5_audio_element_and

Cheers

Mark B

Onyx

unread,
May 27, 2010, 9:47:49 AM5/27/10
to jpl...@googlegroups.com
This is great information.  Thanks Mark!

Onyx M.

Maboa

unread,
May 28, 2010, 1:11:30 PM5/28/10
to jPlayer: the CSS styleable jQuery audio player plugin
Trygve has filed a bug with Opera and I have filed one with Mozilla
https://bugzilla.mozilla.org/show_bug.cgi?id=568789

There are also some interesting comments regarding streaming at the
end of this article: http://www.longtailvideo.com/support/blog/11887/html5-video-not-quite-there-yet
It focusses on video but I think the principles equally apply to
audio.

Cheers

Mark B


On May 27, 3:47 pm, Onyx <onyx.muel...@gmail.com> wrote:
> This is great information.  Thanks Mark!
>
> Onyx M.
>
>
>
> On Thu, May 27, 2010 at 2:04 AM, Maboa <mark.b...@gmail.com> wrote:
> > This is the current state of play with Chrome and audio streams.
> >http://code.google.com/p/chromium/issues/detail?id=40344The issue has
> > jplayer+u...@googlegroups.com<jplayer%2Bunsu...@googlegroups.com >
> > .
> > > > For more options, visit this group athttp://
> > groups.google.com/group/jplayer?hl=en.
>
> > > --
> > > 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<jplayer%2Bunsu...@googlegroups.com >
> > .
> > > For more options, visit this group athttp://
> > groups.google.com/group/jplayer?hl=en.
>
> > --
> > 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<jplayer%2Bunsu...@googlegroups.com >
> > .
Reply all
Reply to author
Forward
0 new messages