Jplayer control in iframe

Question

Edit

My question was not precise enough, so there is a big edit.

I'm trying to control jPlayer (play, pause, add to playlist...) from an iframe.

The jQuery fonctions are on the parent windows and look like that :

player.js

$(document).ready(function(){
    var myPlaylist = new jPlayerPlaylist({

    jPlayer: "#jplayer_N",
    cssSelectorAncestor: "#jp_container_N"
    }, [
    // PLAYLIST HERE
], {
playlistOptions: {
  enableRemoveControls: true,
  autoPlay: true
},
swfPath: "js/jPlayer",
supplied: "mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});

  $(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer,  function(){
    $('.musicbar').removeClass('animate');
    $('.jp-play-me').removeClass('active');
    $('.jp-play-me').parent('li').removeClass('active');
  });

 $(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer,  function(){
 $('.musicbar').addClass('animate');
 });

$(document).on('click', '.jp-play-me', function(e){
  e && e.preventDefault();
  var $this = $(e.target);
  if (!$this.is('a')) $this = $this.closest('a');

  $('.jp-play-me').not($this).removeClass('active');
  $('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');

  $this.toggleClass('active');
  $this.parent('li').toggleClass('active');
  if( !$this.hasClass('active') ){
    myPlaylist.pause();
  }else{
    var i = Math.floor(Math.random() * (1 + 7 - 1));
    myPlaylist.play(i);
  }
  });

$(".song").click(function(event) {
  event.preventDefault();
  $("#jplayer_N").jPlayer("setMedia", 
  { 
    title:$(this).attr("data-title"),
    artist:$(this).attr("data-art"),
    mp3: $(this).attr("data-mp3"),
  })
  .jPlayer("play");
});

$(".addSong").click(function(event) {
  event.preventDefault();
  myPlaylist.add({
    title:$(this).attr("data-title"),
    artist:$(this).attr("data-art"),
    mp3:$(this).attr("data-mp3"),
    playNow:true
  })
  myPlaylist.play();
  });
});

Iframe HTML code

The HTML code in my iframe contains the data i want to send to the parent window. For example :

<div class="padder-v">
    <a href="#" class="song" data-mp3="some_data" data-title="other_data" data-art="another_data>Song Title</a>
    <a href="#" class="addSong" data-mp3="some_data" data-title="other_data" data-art="another_data>Song Title</a>
</div>

So what i need to do, is to call the jquery function in the parent window with data located in the iframe.

Answer 1

Here the solution :

those two lines should be modified :

var myPlaylist = new jPlayerPlaylist({

to

var myPlaylist = new parent.top.jPlayerPlaylist({

and

$(".song").click(function(event) {
    event.preventDefault();
    $("#jplayer_N").jPlayer("setMedia", 
{ 
    title:$(this).attr("data-title"),
    artist:$(this).attr("data-art"),
    mp3: $(this).attr("data-mp3"),
  })
.jPlayer("play");
});

to

$(".song").click(function(event) {
    event.preventDefault();
    parent.top.$("#jplayer_N").jPlayer("setMedia", 
{ 
    title:$(this).attr("data-title"),
    artist:$(this).attr("data-art"),
    mp3: $(this).attr("data-mp3"),
  })
.jPlayer("play");
})

Answer 2

Here is an demo I put together from some existing code I found modifying it to use an iframe.

• Demo
• Source

The gist of it is assigning the window object an ID with a timestamp as such:

var thisWindowID = (new Date()).getTime()

And putting that window ID into a JSON string to be parsed out later, while broadcasting the localStorage item's state as active or not to all windows.