How to play streaming players with jplayer

1,792 views
Skip to first unread message

santhoshi

unread,
Jun 15, 2010, 7:11:56 AM6/15/10
to jPlayer: the CSS styleable jQuery audio player plugin
Hi,

As part of project requirement , we need to design an audio player
which plays streaming mp3 and compatible with ipad. Please clarify few
questions:
1. Does this jplayer support ipad ?
2. I copied the jplayer files and placed in my local host and the
player works fine but when I replaced the given mp3 url with my
streaming url "http://streamos.eastwestrock.com/flash/eastwest/htl/
04_drop_the_girl.mp3" it doesn't play.The mp3 files given in website
are direct where as the one I mentioned directs to an xml file. Can
you please let me know if this jplayer supports streaming and if yes
what do i need to do to make the player work for streaming mp3 ?

If there is some solution already available in the site that I might
have ignored , please let me know.

Thanks in advance,
Santhoshi

Maboa

unread,
Jun 15, 2010, 8:27:39 AM6/15/10
to jPlayer: the CSS styleable jQuery audio player plugin
Yes jPlayer including streaming works on the iPad.

This site works with an icecast stream.

http://www.trygve-lie.com/blog/entry/html_5_audio_element_and

Cheers

Mark B

Trygve Lie

unread,
Jun 15, 2010, 8:42:22 AM6/15/10
to jpl...@googlegroups.com
Hi

jPlayer handle streaming kinda fine. There are some problems with
streaming plugged into the native HTML 5 element in browsers, but jPlayer
will help you handling those to a certain degree.

I've build a radio player which use jPlayer to deal with streaming cross
browser and the backend setup is kinda easy: There are Icecast servers
which stream both OGG and MP3. By streaming in both formats your able to
target all browsers and you have a MP3 stream you can provide to jPlayers
fallback flash. In the jPlayer end then it is basically so easy as you
describe it; just plugging the stream into jPlayer instead of the single
OGG / MP3 file.

Worth noting is that; Opera, FireFox and Chrome will play the OGG stream
with native HTML 5 support. Safari (and the iPad) will use the MP3 stream
with native HTML 5 support. IE will use the fallback flash in jPlayer with
the MP3 stream.

Opera will publish an article on this subject (where jPlayer are used to
build an radio player) very soon. I'll keep you posted when it is online.

You can see the radio player I've build here:
http://apps.trygve-lie.com/radio/widget/

If your curious about the code for the radio player; it can be found in
github:
http://github.com/trygve-lie/widget-radio-player

This is more or less the whole file you want to look at:
http://github.com/trygve-lie/widget-radio-player/blob/master/src/main/webapp/widget/script/player.js

Kind regards
Trygve Lie
@trygve_lie

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


------------------------------------------------
Trygve Lie | http://www.trygve-lie.com

Mark P

unread,
Jun 16, 2010, 7:59:50 AM6/16/10
to jPlayer: the CSS styleable jQuery audio player plugin
Hello Santhoshi,

You say that your stream URL points to an XML file... jPlayer plays
audio files and stream, but it does not interrogate an XML response to
find out what the stream's URL is that you should have given jPlayer
in the first place. If you know the XML structure, then you can easily
write some jQuery to read in the stream's XML file and get the actual
audio stream's URL. Then you just plug that into the jPlayer setFile
command.

Previous threads on the topic of streams and streaming:

jPlayer and audio streams:
http://groups.google.com/group/jplayer/browse_thread/thread/d7b10177d5a683ab

Playing online radio:
http://groups.google.com/group/jplayer/browse_thread/thread/2e5f37a8a2c1a166

The other threads cover some of the problems I had when trying to get
a stream to work. There are even links to hidden demos on the jPlayer
site that demo streaming. The results of our testing in various
browsers and operating systems has also been documented in these
threads.

Best regards,
Mark P.

On Jun 15, 1:42 pm, "Trygve Lie" <p...@trygve-lie.com> wrote:
> Hi
>
> jPlayer handle streaming kinda fine. There are some problems with
> streaming plugged into the native HTML 5 element in browsers, but jPlayer
> will help you handling those to a certain degree.
>
> I've build a radio player which use jPlayer to deal with streaming cross
> browser and the backend setup is kinda easy: There are Icecast servers
> which stream both OGG and MP3. By streaming in both formats your able to
> target all browsers and you have a MP3 stream you can provide to jPlayers
> fallback flash. In the jPlayer end then it is basically so easy as you
> describe it; just plugging the stream into jPlayer instead of the single
> OGG / MP3 file.
>
> Worth noting is that; Opera, FireFox and Chrome will play the OGG stream
> with native HTML 5 support. Safari (and the iPad) will use the MP3 stream
> with native HTML 5 support. IE will use the fallback flash in jPlayer with
> the MP3 stream.
>
> Opera will publish an article on this subject (where jPlayer are used to
> build an radio player) very soon. I'll keep you posted when it is online.
>
> You can see the radio player I've build here:http://apps.trygve-lie.com/radio/widget/
>
> If your curious about the code for the radio player; it can be found in
> github:http://github.com/trygve-lie/widget-radio-player
>
> This is more or less the whole file you want to look at:http://github.com/trygve-lie/widget-radio-player/blob/master/src/main...

Mark P

unread,
Jun 16, 2010, 8:18:31 AM6/16/10
to jPlayer: the CSS styleable jQuery audio player plugin
Hello Trygve Lie,

I look forward to your article.

In the meantime, I noticed that your list of what works or not
differed from my own.
Is your list based on the Mac browsers?

Maboa's results and my own can be found via links in the previous post
in this thread.

I found that Chrome and Safari did not work with streaming, on Win XP
or Vista. I just checked your player in chrome and safari on win XP
and neither worked. [Safari 4.0.5] [Chrome 5.0.375.70]

Chrome on the PC appears to get hung up on the accept-ranges part of
the request... I found it funny that the Google Application Engine for
Eclipse, does not serve files correctly on the Jetty server for Google
Chrome on the PC. (I cannot test with a Mac at my location.)

Other than that, I noticed the volume controls did not work correctly
on Firefox 3.6. It was either on or off.
Hmmm... The volume controls do not work for me at all in Opera 10.53.

Sound vise, Opera performed the best. Firefox 3.6 had a blip of sound
then a long pause before the radio suddenly started playing.

Best regards,
Mark P.

On Jun 16, 12:59 pm, Mark P <mark.panaghis...@gmail.com> wrote:
> Hello Santhoshi,
>
> You say that your stream URL points to an XML file... jPlayer plays
> audio files and stream, but it does not interrogate an XML response to
> find out what the stream's URL is that you should have given jPlayer
> in the first place. If you know the XML structure, then you can easily
> write some jQuery to read in the stream's XML file and get the actual
> audio stream's URL. Then you just plug that into the jPlayer setFile
> command.
>
> Previous threads on the topic of streams and streaming:
>
> jPlayer and audio streams:http://groups.google.com/group/jplayer/browse_thread/thread/d7b10177d...
>
> Playing online radio:http://groups.google.com/group/jplayer/browse_thread/thread/2e5f37a8a...

Trygve Lie

unread,
Jun 16, 2010, 11:41:50 AM6/16/10
to jpl...@googlegroups.com
> In the meantime, I noticed that your list of what works or not
> differed from my own.
> Is your list based on the Mac browsers?

If you are refering to this list:
http://www.trygve-lie.com/blog/entry/html_5_audio_element_and
They have been tested on Win, Ubuntu and Mac browsers.


> I found that Chrome and Safari did not work with streaming, on Win XP
> or Vista. I just checked your player in chrome and safari on win XP
> and neither worked. [Safari 4.0.5] [Chrome 5.0.375.70]

That's correct. I see a typo in my last post when it comes to Chrome (all
OS'es) and Safari (MP3 works on Mac but not at all on PC). Sorry about
that :-|


> Chrome on the PC appears to get hung up on the accept-ranges part of
> the request... I found it funny that the Google Application Engine for
> Eclipse, does not serve files correctly on the Jetty server for Google
> Chrome on the PC. (I cannot test with a Mac at my location.)

Same experience which I have.


> Sound vise, Opera performed the best. Firefox 3.6 had a blip of sound
> then a long pause before the radio suddenly started playing.

Same experience which I have on this one also.

Trygve

Maboa

unread,
Jul 7, 2010, 5:13:23 AM7/7/10
to jPlayer: the CSS styleable jQuery audio player plugin
For anyone interested Trygve Lie has written a great article on
<audio> streaming for the dev.opera site :
http://dev.opera.com/articles/view/html5-audio-radio-player/

It talks about integration with jPlayer.

Cheers

Mark B

On Jun 16, 5:41 pm, "Trygve Lie" <p...@trygve-lie.com> wrote:
> > In the meantime, I noticed that your list of what works or not
> > differed from my own.
> > Is your list based on the Mac browsers?
>
> If you are refering to this list:http://www.trygve-lie.com/blog/entry/html_5_audio_element_and
> They have been tested on Win, Ubuntu and Mac browsers.
>
> > I found that Chrome and Safari did not work withstreaming, on Win XP

Trygve Lie

unread,
Jul 7, 2010, 5:38:32 AM7/7/10
to jpl...@googlegroups.com
Ahh.. You did beat me in pointing to the article Mark ;-)

Anyway: I've got some time to test audio streaming in IE9 (last preview)
against the HTML 5 audio tag and IE) seems to play Mp3 streams very well I
must say.

FireFox 4 beta 1 which arrived yesterday also plays streams better :-)

I've updated the table:
http://www.trygve-lie.com/blog/entry/html_5_audio_element_and

Cheers
Trygve
@trygve_lie

Reply all
Reply to author
Forward
0 new messages