Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Background Play List in WP

Posted on 2017-08-20
4
High Priority
?
43 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 12

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 12

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
Viewers will learn how to create burn videos onto a DVD using Nero Suite including creating a DVD menu and chapters.
Viewers will learn how to use LFOs to modulate the sound of their Sampler instruments. Click the Modulation tab in Sampler: Choose one (or more) of the three available LFOs, and click the respective button to turn it on: Select a waveform, an LF…

661 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