San*_*tri 2 javascript php jquery html5 html5-audio
我正在用PHP构建一个网站,我想在网站页脚页面上显示粘性音频播放器.当任何用户播放音频播放器时,即使用户点击任何其他页面,它也应继续播放.
播放器示例应该像http://www.mixcloud.com
如何实现这种播放器功能.如果PHP中有任何示例,那就太棒了.
为了在浏览网站的其余部分时不断播放粘性音频/视频播放器,您需要使用帧或异步调用(Ajax).
让我们看看如何使用Ajax完成它.出于此示例的目的,需要五个文件,如下所示.此时,将它们全部放在同一目录中.
index.html(主文件)
<!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>
你需要一首.ogg或.mp3格式的歌曲
如果我们处理动态文件,应略微修改上面的示例.在下面的示例中,只需要两个文件.
的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;
}
| 归档时间： |
|
| 查看次数： |
2771 次 |
| 最近记录： |