Change songs to jPlayer by clicking on a link hosted on Amazon S3

Question

Hello everyone and thanks for any help in advance.

I have a ruby ​​on rails application in which I am trying to transmit audio through jPlayer which is hosted on S3. So far I have no problems downloading files or using the browsers built into the player to play audio files or even to launch jPlayer with a song that is on S3. The problem arises when I enter a change of songs.

I initialize jPlayer as follows:

$('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 mp3: url points to the S3 URL (all this works fine).

This allows me to select a song from the list of links, and it loads and starts playing without any problems.

The problem 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 error with access-permission-source control. I hit my head against the wall for hours, trying to figure it out and nothing.

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

Any ideas?

Answer 1

Well, it seems like the only problem was the lack of parentheses around mp3: url part of jPlayer ("setMedia" ....

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

Answer 2

After a lot of searching, this may be one of the solutions.

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