Fatal编程技术网
  • javascript/
  • Javascript 播放粘性音频播放器时浏览网站

Javascript 播放粘性音频播放器时浏览网站

javascript php jquery html

Javascript 播放粘性音频播放器时浏览网站,javascript,php,jquery,html,html5-audio,Javascript,Php,Jquery,Html,Html5 Audio,我正在用PHP建立一个网站，我想在网站的页脚显示粘性音频播放器。当任何用户播放音频播放器时，即使用户单击任何其他页面，它也应继续播放 玩家的例子应该是 如何实现这种播放器功能。如果PHP中有任何示例，那就太好了。为了在浏览网站的其余部分时让粘性音频/视频播放器不断播放，您需要使用帧或异步调用（Ajax） 让我们看看如何使用Ajax实现它。在本例中，需要五个文件，如下所示。此时，将它们全部放在同一个目录中 index.html（主文件） 看起来该站点正在使用一些复杂的JS和Ajax。一种更简单的方

我正在用PHP建立一个网站，我想在网站的页脚显示粘性音频播放器。当任何用户播放音频播放器时，即使用户单击任何其他页面，它也应继续播放

玩家的例子应该是

如何实现这种播放器功能。如果PHP中有任何示例，那就太好了。

为了在浏览网站的其余部分时让粘性音频/视频播放器不断播放，您需要使用帧或异步调用（Ajax）

让我们看看如何使用Ajax实现它。在本例中，需要五个文件，如下所示。此时，将它们全部放在同一个目录中

index.html（主文件）

看起来该站点正在使用一些复杂的JS和Ajax。一种更简单的方法是使用框架，您仍然可以控制其中的内容，但更简单。@rlatief您能给我演示一下如何使用框架来实现这一点吗？提前感谢嗯不：D我没有勇气在没有测试的情况下放置框架集示例代码，因为我已经很久没有使用它了（我相信它也被弃用了，但在HTML5中仍然可用）。做一个搜索应该有很多关于如何创建HTML框架的示例。然后使用（不太复杂的）JS搜索如何操作其中的内容。很好的答案。关于Javascript部分，我建议使用HTML5历史API，以便在浏览器中更改URL，尽管AJAX加载了页面内容。要做到这一点，有一个非常好的方法可以自动化HTML5历史API，并且可以用一行代码替换您编写的Javascript。@MichaëlPerrin您能实现
HTML5历史API
并更新答案或添加新的答案吗？ 
<!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>

<h1>Home</h1>
<p>This is the default page...</p>

<h1>About Us</h1>
<p>Something about us</p>

<h1>Portfolio</h1>
<p>This is our portfolio. Isn't it gorgeous!</p>

<h1>Contact</h1>
<p>Catch us if you can...</p>

<!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>

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;
}