View Full Version : initialise play requests from within IFRAME pages

05-29-2012, 12:12 PM
HI! I am no web designer pro so please be gentle ;)

I am currently building a website to be able to share my DJ mixes and studio production work, a preview is available on http://davidloran.com/test-03/index.html .

The site is composed of:

- index.html

-> contains

1- A css3 menu (including list of mixes currently being correctly played in the player)
2- A jquery plugin audio player (http://codecanyon.net/item/fullwidth-audio-player-jquery-plugin/841563)
3- An IFRAME where the other pages are loaded into

- tracks.html

-> contains a list of the production tracks to be selected by the user and then (eventually!) played into the player placed on the index page

- facebook.html

-> contains FB comments box

- background.html

Problem found:
As you probably noticed from my description text above, the production tracks cannot be played in the audio-player because they are placed in another page (track.html) called into the IFRAME.

Are there any ways the audio-player .js code (I'll post the code in next) can be modified so that it handles play requests initialised from pages in the iframe?

Any other suggestions come to minds?

Thank you!

05-29-2012, 12:20 PM
I cannot post the whole code of the audio-player .js as it's too large but from my understanding this part could be interesting (please advise if I need to look for any others):

function _documentTrackHandler() {

if($elem.jquery >= "1.7"){
$('body').on('click', '.fap-my-playlist li a, .fap-single-track', _addTrackFromDocument);
else {
$('body').delegate('.fap-my-playlist li a, .fap-single-track', 'click', _addTrackFromDocument);

function _addTrackFromDocument() {
if(!playlistCreated) { return false; }
var node = $(this);
if(popupMode) {
var html = '<a href="'+node.attr('href')+'" title="'+(node.attr('title') ? node.attr('title') : '')+'" target="'+(node.attr('target') ? node.attr('target') : '')+'" rel="'+(node.attr('rel') ? node.attr('rel') : '')+'" data-meta="'+(node.data('meta') ? node.data('meta') : '')+'"></a>';
if(node.data('meta')) {
html += '<span id="'+node.data('meta').substring(1)+'">'+$('body').find(node.data('meta')).html()+'</span>';
_addTrackToPopup(html, true);
else {
$.fullwidthAudioPlayer.addTrack(node.attr('href'), node.attr('title'), $('body').find(node.data('meta')).html(), node.attr('rel'), node.attr('target'), true);

return false;


05-29-2012, 03:38 PM
another interesting and potentially helpfull part of the code:

//get tracks
function _onSoundManagerReady() {

if(options.playlist) {
var playlistDom = '<div class="clear"></div><div id="fap-playlist-wrapper"><ul id="fap-playlist"></ul></div><div class="clear"></div>';
$playlistWrapper = $(playlistDom);

if(options.xmlPath) {
//get playlists from xml file
$.ajax({ type: "GET", url: options.xmlPath, dataType: "xml", cache: false, success: function(xml) {

var playlists = $(xml).find('playlists'),
playlistId = options.xmlPlaylist ? playlistId = options.xmlPlaylist : playlistId = playlists.children('playlist:first').attr('id');


//check if custom xml playlists are set in the HTML document
$('.fap-xml-playlist').each(function(i, playlist) {
var $playlist = $(playlist);
$playlist.append('<h3>'+playlist.title+'</h3><ul class="fap-my-playlist"></ul>');
//get the start playlist
playlists.children('playlist[id="'+playlist.id+'"]').children('track').each(function(j, track) {
var $track = $(track);
var targetString = $track.attr('target') ? 'target="'+$track.attr('target')+'"' : '';
var relString = $track.attr('rel') ? 'rel="'+$track.attr('rel')+'"' : '';
var metaString = $track.find('meta') ? 'data-meta="#'+playlist.id+'-'+j+'"' : '';
$playlist.children('ul').append('<li><a href="'+$track.attr('href')+'" title="'+$track.attr('title')+'" '+targetString+' '+relString+' '+metaString+'>'+$track.attr('title')+'</a></li>');
$playlist.append('<span id="'+playlist.id+'-'+j+'">'+$track.find('meta').text()+'</span>');

error: function() {
alert("XML file could not be loaded. Please check the XML path!");
else {

function _getTracksFromNodes(nodes) {

$elem.bind('fap-tracks-stored', function() {
if(loadingIndex < nodes.length) {
var node = nodes.eq(loadingIndex);
$.fullwidthAudioPlayer.addTrack(node.attr('href'), node.attr('title'), options.xmlPath ? node.children('meta').text() : $elem.find(node.data('meta')).html(), node.attr('rel'), node.attr('target'));
else {
if(options.randomize) { _shufflePlaylist(); }



05-29-2012, 09:12 PM
this what I've got on the index.html page head:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dj David Loran</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fullwidthAudioPlayer.css">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<link href="css/nblack.css" rel="stylesheet" type="text/css" />
<link href="css/Iframe.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
<script src="js/jquery.fullwidthAudioPlayer.js" type="text/javascript"></script>

<script type="text/javascript">
//set here the swf folder
soundManager.url = 'swf/';
//need to be flash player 9
soundManager.flashVersion = 9;
//prefer HTML5 audio rather than flash
soundManager.useHTML5Audio = true;

$('#fap').fullwidthAudioPlayer({autoPlay: 'true', wrapperPosition:'bottom', wrapperColor:'#3f3f3f'});


function changeContent() {


where, from the same page, links like this one play correctly in the player:

<ul class="fap-my-playlist">
<li><a href="../Audio/Lounge session - Bar.mp3" title="Dj David Loran - Lounge session - Bar" target="http://www.davidloran.com/">Lounge session - Bar</a></li>

The question is: How do I get the same types of links work from a different page opening within an IFRAME?!?