Question

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

播放器示例应该像http://www.mixcloud.com

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

Answer 1

为了在浏览网站的其余部分时不断播放粘性音频/视频播放器，您需要使用框架或异步调用（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;
}

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

1 个答案: