Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Play Uninterrupted Background Music On Your Website

Published :
Author :
Adam Khoury
Learn about four separate techniques that will allow you to have continuous uninterrupted music playing on all the pages of a website as the user navigates from page to page. All of these techniques should be followed up with manipulating the URL address bar using JavaScript history object pushState() method so that navigation works like normal and people can post links to individual sections of your website to others. 1. HTML iframe 2. Javascript simple content hide and reveal <html> <head> <style> body { background-color: #95B4C6; font-family:Arial, Helvetica, sans-serif; font-size:14px; } #pageAudio{ width:900px; margin:auto; padding:10px; } #pageHeader { width:900px; margin:auto; background-color: #F2F2F2; padding:10px; } #pageBody { width:900px; margin:auto; background-color:#FFF; padding:10px; } #pageFooter { width:900px; margin:auto; background-color: #F2F2F2; padding:10px; } .section{ display: none; padding:10px; font-size:18px; height:300px; } </style> <script> function toggleSection(sectionID) { var sa = new Array('home','services','portfolio','contact'); for (s in sa) { document.getElementById(sa[s]).style.display = 'none'; } var myTarget = document.getElementById(sectionID); myTarget.style.display = 'block'; } </script> </head> <body> <div align="right" id="pageAudio">Site Audio Player Goes Here For Uninterupted Play</div> <div id="pageHeader"> <h1 style="display:inline;">Site Logo</h1><br /><br /> <p style="display:inline;"> <a href="#" onclick="return false" onmousedown="javascript:toggleSection('home');">Home</a> &nbsp; &nbsp; <a href="#" onclick="return false" onmousedown="javascript:toggleSection('services');">Services</a> &nbsp; &nbsp; <a href="#" onclick="return false" onmousedown="javascript:toggleSection('portfolio');">Portfolio</a> &nbsp; &nbsp; <a href="#" onclick="return false" onmousedown="javascript:toggleSection('contact');">Contact</a></p> </div> <div id="pageBody"> <div id="home" class="section" style="display:block;">Home Page Content Goes Here</div> <div id="services" class="section">Services Page Content Goes Here</div> <div id="portfolio" class="section">Portfolio Page Content Goes Here</div> <div id="contact" class="section">Contact Page Content Goes Here</div> </div> <div id="pageFooter">&copy;2010 DevelopPHP.com</div> </body> </html> 3. Flash 4. Ajax Requests One could use Ajax requests to bring new content into an HTML container without refreshing the page, if you wish to have the content stored in a database or external file on the server.