Streaming live audio with jPlayer

pion picture pion · Feb 14, 2011 · Viewed 16.7k times · Source

I am learning how to use jPlayer. I'd like to stream http://u10.sky.fm:80/sky_the80s audio using jPlayer.

http://www.jplayer.org/1.2.0/demo-08-oggSupportFalse/ demo works on Chrome 9. I tried to simplify it with the following code snippets:

$(document).ready(function() {
  $("#jpId").jPlayer( {
    ready: function () {
      $(this).jPlayer("setFile", "http://mp3-vr-128.as34763.net:80/;stream/1", "http://ogg2.as34763.net/vr160.ogg")
      .jPlayer("play");
    },
    swfPath: "client/js",   
    volume: 60,
    oggSupport: true
  });
});

Unfortunately, the above does not work. I am sure I am missing something since I am new with jPlayer.

Any help is appreciated. Thanks in advance for your help.

Again, ideally I'd like to stream http://u10.sky.fm:80/sky_the80s.

Cross post it on https://groups.google.com/forum/?fromgroups#!topic/jplayer/yW7WoYtrxI8 last night.

UPDATE: The following code snippets work

$(document).ready(function() {
  $("#jpId").jPlayer( {
    ready: function () {
      $(this).jPlayer("setMedia", {
            m4a: "http://mp3-vr-128.as34763.net:80/;stream/1",
            oga: "http://ogg2.as34763.net/vr160.ogg"
      }).jPlayer("play");
      debug($(this));
    },
    supplied: "m4a, oga",
    swfPath: "client/js"    
  });
});

But I still can not make the http://u10.sky.fm:80/sky_the80s works.

UPDATE 2: The following code snippets work on Firefox Minefield but does not work on Chrome 9:

$(document).ready(function() {
  $("#jpId").jPlayer( {
    ready: function () {
      $(this).jPlayer("setMedia", {
              mp3: "http://u10.sky.fm:80/sky_the80s"
//            m4a: "http://mp3-a8-128.as34763.net:80/;stream/1"
//            m4a: "http://mp3-vr-128.as34763.net:80/;stream/1"
      }).jPlayer("play");
      debug($(this));
    },
    supplied: "mp3",
    swfPath: "client/js"    
  });
});

Answer

ohrstrom picture ohrstrom · Apr 13, 2012

Two things you could check:

Is the path to the swf correct?

Depending on the browser-capabilities jplayer chooses the playback mode (html5/flash). Try using an absolute path for the swf, includeing the file-part - eg:

swfPath:"/static/swf/jplayer.swf"

and make sure that you can access it, in your case maybe something like: http://www.sky.fm/static/swf/jplayer.swf

Do you serve the correct MIME Types?

As written in the Developer Guide you should make sure to propperly set the mimetypes. Not sure if you have an issue there. When checking the mentioned stream with:

curl http://mp3-a8-128.as34763.net:80/;stream/1 

you get:

ICY 200 OK
...
content-type:audio/mpeg
...

The manual tells that you should set audio/mp4 for m4a. (and audio/mpeg is used for mp3)

Maybe you could provide your current code with urls to running streams? This would make it easier to figure out what's going on. (The http://u10.sky.fm:80/sky_the80s does not work - at least for me...)