Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    initialise play requests from within IFRAME pages

    HI! I am no web designer pro so please be gentle

    Situation:
    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...-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!

  • #2
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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):

    Code:
    		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;
    			};			
    			
    		};

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    another interesting and potentially helpfull part of the code:

    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');
    					
    					_getTracksFromNodes(playlists.children('playlist[id="'+playlistId+'"]').children('track'));
    					
    					//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 {
    				_getTracksFromNodes($elem.children('a'));
    			}
    		};
    		
    		function _getTracksFromNodes(nodes) {
    			
    			$elem.bind('fap-tracks-stored', function() {
    				++loadingIndex;
    				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 {
    					$elem.unbind('fap-tracks-stored');
    					if(options.randomize) { _shufflePlaylist(); }
    					_buildPlayer();
    				}
    				
    			}).trigger('fap-tracks-stored');
    			
    		};

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this what I've got on the index.html page head:

    Code:
    <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;
    
    $(document).ready(function(){
      $('#fap').fullwidthAudioPlayer({autoPlay: 'true', wrapperPosition:'bottom', wrapperColor:'#3f3f3f'});
     
    });
    
    function changeContent() { 
    document.getElementById('tracks').innerHTML=""; 
    } 
    </script>
    
    
    </head>
    where, from the same page, links like this one play correctly in the player:

    Code:
     <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?!?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •