Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Background Play List in WP

Posted on 2017-08-20
4
High Priority
?
55 Views
Last Modified: 2017-08-22
Hi Experts,

I'm building a website for a music studio, which is not a one-pager, within WP.

When the visitor clicks on the music player, my client wants to have a play list playing while the visitor goes to other pages. Is there a good plug-in for that? I assume that I need a pop-up window?

Thanks.
0
Comment
Question by:APD_Toronto
  • 2
  • 2
4 Comments
 
LVL 13

Expert Comment

by:Leonidas Dosas
ID: 42262490
You must use iframe element that does not change so that your music does not stop when you click a link.One suggestion is the
  soundcloud
0
 

Author Comment

by:APD_Toronto
ID: 42262572
but, even with iFrame, the music will stop. An .asx file for example holds multiple of songs... I'm not sure, I think,, that would be a play list or album?
0
 

Author Comment

by:APD_Toronto
ID: 42262576
This is something I am looking for, it can play music while you "change" pages
https://webartisan.ch/en/products/soundy-background-music/free-wordpress-plugin/#wa_examples

By changing pages, they are probably just hiding/unhiding divs, but how would I change my structure to that by maintaining my design, which is at www.southerntime.ca
0
 
LVL 13

Accepted Solution

by:
Leonidas Dosas earned 3000 total points
ID: 42262649
I make a simple example.The main page (pageone.html):
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	<link rel="pingback" href="http://www.southerntime.ca/xmlrpc.php" /> 
	<title>Blog &#8211; Southern Time Productions</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="Southern Time Productions &raquo; Feed" href="http://www.southerntime.ca/feed/" />
<link rel="alternate" type="application/rss+xml" title="Southern Time Productions &raquo; Comments Feed" href="http://www.southerntime.ca/comments/feed/" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/www.southerntime.ca\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.8.1"}};
			!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b===c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='flex-lite-style-css'  href='http://www.southerntime.ca/wp-content/themes/_southern_theme/style.css?ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='flex-lite-fonts-css'  href='https://fonts.googleapis.com/css?family=Rokkitt%7CRaleway%3A400%2C700&#038;ver=4.8.1' type='text/css' media='all' />
<link rel='stylesheet' id='evil-icons-style-css'  href='http://www.southerntime.ca/wp-content/themes/flex-lite/fonts/evil-icons/evil-icons.min.css?ver=4.8.1' type='text/css' media='all' />
<link rel='https://api.w.org/' href='http://www.southerntime.ca/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.southerntime.ca/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.southerntime.ca/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.8.1" />
<link rel="canonical" href="http://www.southerntime.ca/blog/" />
<link rel='shortlink' href='http://www.southerntime.ca/?p=6' />
<link rel="alternate" type="application/json+oembed" href="http://www.southerntime.ca/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.southerntime.ca%2Fblog%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://www.southerntime.ca/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fwww.southerntime.ca%2Fblog%2F&#038;format=xml" />
		<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
		<link rel="icon" href="http://www.southerntime.ca/wp-content/uploads/2017/08/logo.jpg" sizes="32x32" />
<link rel="icon" href="http://www.southerntime.ca/wp-content/uploads/2017/08/logo.jpg" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://www.southerntime.ca/wp-content/uploads/2017/08/logo.jpg" />
<meta name="msapplication-TileImage" content="http://www.southerntime.ca/wp-content/uploads/2017/08/logo.jpg" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
</head>

<body class="page-template-default page page-id-6">
    <div class="wrapper">
	<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
	
	<nav id="site-navigation" class="navbar" role="navigation">
		<div class="site-branding">
			
    <a href="http://www.southerntime.ca/" rel="home">
    
        <div id="divIdentity">
            
            
                <div id="divLogo">
                    <img src="http://www.southerntime.ca/site_images/logo.jpg">
                </div>
                <div id="divBlogInfo">
                    Southern Time Productions                </div>
			
					<p id="pMotto" class="site-description">never again will the sun go down&#8230;</p>
		 
        </div>
    </a>
        		</div><!-- .site-branding -->
		
		<label for="menu-trigger" class="menu-toggle"><span data-icon="ei-navicon" data-size="s"></span></label>
		<input id="menu-trigger" type="checkbox">
		
		<ul id="menu-main-nav-menu" class="main-menu"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-20"><a href="http://www.southerntime.ca/">Home</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21">About</li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://www.southerntime.ca/music-videos/">Music &#038; Videos</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://www.southerntime.ca/news/">News</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-22"><a href="http://www.southerntime.ca/blog/">Blog</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://www.southerntime.ca/contact/">Contact &#038; T&#8217;s</a></li>
</ul>	</nav>		<!-- #site-navigation -->


        <div id="divFeaturedImg">
           <img id="imgFeatured" src="http://www.southerntime.ca/wp-content/uploads/2017/08/ST-original-homepage-1500x530.jpg">
        </div>
            	
	
	<div id="content" class="site-content page-container">

            <div id="divTitle" class="post-title">
                Blog            </div>
            
            <main id="main" class="site-main" role="main">
			
			<article id="post-6" class="post-6 page type-page status-publish has-post-thumbnail hentry">

    <div class="post-content">
        <p>Something on your mind&#8230;.</p>
                                 
    </div>
    
</article>
						
		</main>		
	</div>
	
	
	<hr style="margin: 0;" />
		
	<footer id="colophon" class="main-footer" role="contentinfo">
        
		<div id="divFooter" class="site-info">

                    Designed By <a href="https://www.aces-project.com" target="_blank">
                        Ace's Project Development Inc.</a>
                    
		</div><!-- .site-info -->
		
		<div class="social-icons"></div>        
	</footer><!-- #colophon -->
</div>
    <iframe src="https://www.youtube.com/embed/_L5C9VEzCww?autoplay=1" frameborder="1" height="250" width="450"></iframe>
	<script type='text/javascript' src='http://www.southerntime.ca/wp-content/themes/flex-lite/fonts/evil-icons/evil-icons.min.js?ver=4.8.1'></script>
<script type='text/javascript' src='http://www.southerntime.ca/wp-includes/js/wp-embed.min.js?ver=4.8.1'></script>
<script>
          $('#menu-item-21').on('click',function (){
             $.get('pagetwo.html',function (response){
                 $('.wrapper').detach();
                 $('.page-template-default').prepend(response);
             });
          });
</script>

</body>
</html>

Open in new window


The pagetwo that contains only the part that I want to change in the pageone:
    <div class="wrapper">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>
	
	<nav id="site-navigation" class="navbar" role="navigation">
		<div class="site-branding">
			
    <a href="http://www.southerntime.ca/" rel="home">
    
        <div id="divIdentity">
            
            
                <div id="divLogo">
                    <img src="http://www.southerntime.ca/site_images/logo.jpg">
                </div>
                <div id="divBlogInfo">
                    Southern Time Productions                </div>
			
					<p id="pMotto" class="site-description">never again will the sun go down&#8230;</p>
		 
        </div>
    </a>
        		</div><!-- .site-branding -->
		
		<label for="menu-trigger" class="menu-toggle"><span data-icon="ei-navicon" data-size="s"></span></label>
		<input id="menu-trigger" type="checkbox">
		
		<ul id="menu-main-nav-menu" class="main-menu"><li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-20"><a href="http://www.southerntime.ca/">Home</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-21"><a href="http://www.southerntime.ca/about/">About</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://www.southerntime.ca/music-videos/">Music &#038; Videos</a></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://www.southerntime.ca/news/">News</a></li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://www.southerntime.ca/blog/">Blog</a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://www.southerntime.ca/contact/">Contact &#038; T&#8217;s</a></li>
</ul>	</nav>		<!-- #site-navigation -->


        <div id="divFeaturedImg">
           <img id="imgFeatured" src="http://www.southerntime.ca/wp-content/uploads/2017/08/ST-original-homepage-1500x530.jpg">
        </div>
            	
	
	<div id="content" class="site-content page-container">

            <div id="divTitle" class="post-title">
                About            </div>
            
            <main id="main" class="site-main" role="main">
			
			<article id="post-2" class="post-2 page type-page status-publish has-post-thumbnail hentry">

    <div class="post-content">
        <p>About</p>
<p>&nbsp;</p>
<p>This is an example page. It&#8217;s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:</p>
<blockquote><p>Hi there! I&#8217;m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin&#8217; caught in the rain.)</p></blockquote>
<p>&#8230;or something like this:</p>
<blockquote><p>The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.</p></blockquote>
<p>As a new WordPress user, you should go to <a href="http://localhost/southerntime.ca/wp-admin/">your dashboard</a> to delete this page and create new pages for your content. Have fun!</p>
                                 
    </div>
    
</article>
<div id="comments" class="comments-area">

		<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/about/#respond" style="display:none;">Cancel reply</a></small></h3>			<form action="http://www.southerntime.ca/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate>
				<p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Comment</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" aria-required="true" required="required"></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" aria-required='true' required='required' /></p>
<p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" aria-required='true' required='required' /></p>
<p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='2' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p>			</form>
			</div><!-- #respond -->
	
</div><!-- #comments -->

						
		</main>		
	</div>
	
	
	<hr style="margin: 0;" />
		
	<footer id="colophon" class="main-footer" role="contentinfo">
        
		<div id="divFooter" class="site-info">

                    Designed By <a href="https://www.aces-project.com" target="_blank">
                        Ace's Project Development Inc.</a>
                    
		</div><!-- .site-info -->
		
		<div class="social-icons"></div>        
	</footer><!-- #colophon -->
</div>	

Open in new window


Note that I detach() the div.wrapper and replace it via $.get method with the pagetwo.html elements. I use iframe that it continues to playing.To test it click only the About label.
PS
The music is one of my favorite songs!!Enjoy!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
Viewers will learn how to create a new project within Adobe Encore and the basic layout of the software.
Viewers will learn how to turn a Live Set into a compressed Live Pack file, and how to install Live Packs. Make: File > Collect All And Save: File > Manage Files: Click Manage Project: Click Create Pack: Select save location: Install: Doub…
Suggested Courses

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question