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
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>
<a href="#" onclick="return false" onmousedown="javascript:toggleSection('services');">Services</a>
<a href="#" onclick="return false" onmousedown="javascript:toggleSection('portfolio');">Portfolio</a>
<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">©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.