Background Play List in WP

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.
APD TorontoAsked:
Who is Participating?
 
Leonidas DosasConnect With a Mentor Commented:
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
 
Leonidas DosasCommented:
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
 
APD TorontoAuthor Commented:
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
 
APD TorontoAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.