I am building a website in PHP, in which i want to show sticky audio player at website footer page. When any user play audio player it should continue to play even user click on any other page.
Player example should be like
How to achieve this kind of player functionality. If any example available in PHP, it would be great.
I am building a website in PHP, in which i want to show sticky audio player at website footer page. When any user play audio player it should continue to play even user click on any other page.
Player example should be like http://www.mixcloud.
How to achieve this kind of player functionality. If any example available in PHP, it would be great.
Share Improve this question edited Aug 4, 2014 at 22:42 hex494D49 9,2453 gold badges41 silver badges49 bronze badges asked Aug 4, 2014 at 17:57 Sanjay KhatriSanjay Khatri 4,2217 gold badges40 silver badges43 bronze badges 3- looks like the site's using some plex JS & Ajax. A simpler way is to use frame, you can still control things in it, but simpler. – rlatief Commented Aug 4, 2014 at 18:00
- @rlatief could you please show me example how we can do that using frame? Thanks in advance – Sanjay Khatri Commented Aug 4, 2014 at 18:02
- hmm no :D I don't have the courage to put frameset sample codes without testing since I haven't been using it for a long time (I believe it's also deprecated but still available in HTML5). Do a search there should be lots of samples about how to create HTML frames. Then do a search about how to manipulate things in it by using (not too plex) JS. – rlatief Commented Aug 4, 2014 at 18:10
1 Answer
Reset to default 7In order to have a sticky audio/video player constantly playing while you browse the rest of a website, you need to use frames or asynchronous calls (Ajax).
Let's see how it can be done using Ajax. For the purpose of this example five files are needed as shown below. At this point, place all of them within a same directory.
index.html (the main file)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Browsing and playing music</title>
<style type="text/css">
#menu {overflow:hidden;margin:0px;padding:0px;list-style-type:none;}
#menu > li {float:left;padding:5px;margin:5px;}
</style>
<script type="text/javascript">
// This function will dynamically load all the needed content
// url -> what to load; target -> where to place it on return
function load_content(url, target){
xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
target.innerHTML = xhr.responseText;
}
}
xhr.send();
}
// In a real situation you may not want to change default behavior for all the
// links within a page - in that case, mark those link with a 'class-name' and loop
// them using getElementsByClassName('class-name')
window.onload = function(){
var a = document.getElementsByTagName('A'), i;
load_content('home.html', document.getElementById('content'));
for(i = 0; i < a.length; i++){
(function(i){
a[i].onclick = function(){
load_content(a[i].href, document.getElementById('content'));
return false;
};
})(i);
}
};
</script>
</head>
<body>
<ul id="menu">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!-- this div holds all the dynamic content -->
<div id=content></div>
<!-- player -->
<audio controls id="player">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<p>Your browser does not support the audio element.</p>
</audio>
</body>
</html>
home.html
<h1>Home</h1>
<p>This is the default page...</p>
about.html
<h1>About Us</h1>
<p>Something about us</p>
portfolio.html
<h1>Portfolio</h1>
<p>This is our portfolio. Isn't it gorgeous!</p>
contact.html
<h1>Contact</h1>
<p>Catch us if you can...</p>
And you'll need a song in .ogg or .mp3 format
In case we deal with dynamic files, the sample above should be slightly modified. In the example below only two files are needed.
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Browsing and playing music</title>
<style type="text/css">
#menu {overflow:hidden;margin:0px;padding:0px;list-style-type:none;}
#menu > li {float:left;padding:5px;margin:5px;}
</style>
<script type="text/javascript">
function load_content(action, target){
xhr = new XMLHttpRequest();
var url = "listener.php?action=" + encodeURIComponent(action);
xhr.open("GET", url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
target.innerHTML = xhr.responseText;
}
}
xhr.send();
}
window.onload = function(){
var a = document.getElementsByClassName('dynamic'), i;
load_content('home', document.getElementById('content'));
for(i = 0; i < a.length; i++){
(function(i){
a[i].onclick = function(){
load_content(a[i].href, document.getElementById('content'));
return false;
};
})(i);
}
};
</script>
</head>
<body>
<ul id="menu">
<li><a href="home" class="dynamic">Home</a></li>
<li><a href="about" class="dynamic">About</a></li>
<li><a href="portfolio" class="dynamic">Portfolio</a></li>
<li><a href="contact" class="dynamic">Contact</a></li>
</ul>
<!-- this div holds all the dynamic content -->
<div id=content></div>
<!-- player -->
<audio controls id="player">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<p>Your browser does not support the audio element.</p>
</audio>
</body>
</html>
listener.php
switch(isset($_GET["action"]) ? $_GET["action"] : "default"){
case "about":
echo "about-content";
break;
case "portfolio":
echo "portfolio-content";
break;
case "contact":
echo "contact-content";
break;
default:
echo "index-content";
break;
}