Changing songs on jPlayer by clicking a link, hosted on Amazon S3

Question

Hello all and thanks for any help in advance.

I have a ruby on rails application in which I am attempting to stream audio through jPlayer, which is hosted on S3. So far I have no problem uploading files or using the browsers built in player to play audio files, or even getting jPlayer to initialize with a song that is on S3. The issue comes when I get into changing songs.

I initialize jPlayer like this:

$('a.html5').click(function() { 

    var url = $(this).attr('href');  

    $("#jquery_jplayer_1").jPlayer({
        ready: function (event) {
            $(this).jPlayer("setMedia", {
                mp3: url
            });
        },
        swfPath: "javascripts",
        supplied: "mp3",
        wmode: "window"
    });
    return false;  
});  

where the mp3: url points to the S3 URL (this all works just fine).

This allows me to select a song from a list of links, and it loads up and starts playing no problem.

The issue is that when I try to change songs, I get an access-control-allow-origin error. So I tried the following:

$('a.html5').click(function() {

    var url = $(this).attr('href');  

    $("#jquery_jplayer_1").jPlayer("setMedia", mp3: url).jPlayer("play");

    return false;  
  });

This still gives me an access-control-allow-origin error. I have been pounding my head against the wall for hours trying to figure this out and nothing.

So basically a summary is that I can initialize jPlayer and play a song just fine, but when I want to go change a song, access-control-allow-origin errors ruin my day.

Any ideas?

Answer 1

Well it appears that the only issue was a lack of brackets around the mp3: url part of jPlayer("setMedia"....

so it should have been (...).jPlayer("setMedia", {mp3: url}).(...)

Answer 2

After Searching a lot it could be one of the solutions too.

 function songs(json1) {

$("#jquery_jplayer_1").jPlayer("destroy"); //this will destroy previous jplayer content and then if you again call this function it will add the new url of you audio song to the jplayer

        var audio_url_inside = json1.audio_url;

        $('#jquery_jplayer_1').jPlayer({

            ready:function (event) {

                  $(this).jPlayer("setMedia", {

                    mp3:audio_url_inside,

                    oga:audio_url_inside

                }).jPlayer("play");   //attemp to play media

            },

                  swfPath:"http://www.jplayer.org/2.1.0/js",

            supplied:"mp3, oga"

        });

    }

:Hope it will help.