Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Play Uninterrupted Background Music On Your Website

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 http://www.developphp.com/lib/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 http://www.developphp.com/view.php?tid=1020 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.
thumb

JavaScript Videos

Audio Programming

Button Sound Effects Tutorial Audible Menu SystemsAudio Play Pause Mute Buttons TutorialAudio Seek and Volume Range Slider TutorialAudio Time Update Position TutorialAudio Player Skins and CSS Graphics TutorialAudio OGG Files CheckAudio Play Speed Setting playbackRate TutorialAudio Playlist Play Buttons JavaScript Programming TutorialAudio Playlist Array TutorialAudio Song Select Track Playlist TutorialAnalyser Bars Animation HTML Audio API TutorialPlay Uninterrupted Background Music On Your WebsiteHow to Create Custom Sound Effects with FruityLoops