使用新的 HTML5 历史记录 API 导航时，如何在我的网站上继续播放音乐？

Question

根据已回答的问题：how-do-soundcloud-keep-music-playing-on-when-navigating

Soundcloud 使用 HTML5 引入的新 API - HTML5 历史 API.

所以我想知道如何在我的网站（音乐服务网站）上实现这一点，以便在导航时无缝播放音乐。我已经有一个播放音乐的网站（vis1.php - 是音乐播放器），通过使用 AJAX 将内容加载到 modulewrapper 来无缝导航。不管这有多大的缺点，它根本不实用，特别是如果有很多用户，所以将 php 的内容加载到 modulewrapper 中并不是一个好主意。

所以根据那篇文章，HTML5 历史 API 似乎是最好的方法，所以我的问题是，我该如何着手实施这个 HTML5 历史记录 API，或者我能否实施 HTML5 H.API 以及我的 Ajax模块包装器？

<?php  include ("./inc/vis1.php"); ?> // this is my music player
<?php

      if (isset($_SESSION["user_login"])) 
        {
        echo '
            <div id="menu">
                <a href="home">Home</a>
                <a href="'.$use.'">Prof</a>

                <a href="set.php">Set</a>
                <a href="msmyg.php">Me</a>

                <a href="frireq.php.php">Fr</a>
                <a href="nudg.php">Nudg</a>
                <a href="logout.php">Logout</a>

            </div>
            ';
        } 
        else{

            echo'<div id="menu">
            <a href="index.php"/>S</a>
            <a href="index.php">L </a>
            </div>  
        ';
        }
        ?>

    <div id="ihed"><div>
       <script src="./js/jquery-2.1.4.min.js"></script>
       <script src="./js/general.js"></script>
</html>     
<footer>
    <div id="c1">           
        <?php echo "Hedi Bej &copy; i-neo 2015"; ?>
    </div>
</footer>

这是我的JavascriptAjaxgeneral.js文件

(function() {

$('#ihed').load('home.php');
var $moduleWrapper = $('#ihed');
var loadIntoModuleWrapper = function(e) {
    e.preventDefault();
    var $anchor = $(this);
    var page = $anchor.attr('href');
    $moduleWrapper.load(page);
};

var sendFormAndLoadIntoModuleWrapper = function(e) {
    e.preventDefault();
    var $form = $(this);
    var method = $form.attr('method') || 'GET';
    $.ajax({
        type: $form.attr('method') || 'GET',
        url: $form.attr('action'),
        data: $form.serialize(),
        success: function(data) {
            $moduleWrapper.html(data);
        }
    });
};


// manage menu links to load content links onto module wrapper
$('.menu').on('click', 'a', loadIntoModuleWrapper);

// manage module-wrapper links to load onto module wrapper
$moduleWrapper.on('click', '.open', loadIntoModuleWrapper);

// manage submits form and load result onto module wrapper
$moduleWrapper.on('submit', '.open-form', sendFormAndLoadIntoModuleWrapper);
}());

谢谢，我该怎么做？

Answer 1

音云一直在播放音乐，因为页面并没有真正改变。他们提出了几个 ajax 请求来加载信息并根据该请求向您显示页面信息。

然后，正如您所说，他们可能正在使用 HTML5 历史记录 API 来保存页面状态，以便用户可以 "go back" 或 "go foward"。

如果您刷新页面，声音将停止，因为将向服务器发出文档请求。

我不熟悉这种架构，但我认为您可以使用 angularJS 轻松完成此操作。试一试：

https://www.codeschool.com/courses/shaping-up-with-angular-js

编辑

更改链接的方法如下：https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

示例：

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

这会在浏览器 url 上显示您的网站。com/bar。html。

stateObj 是与推送状态关联的 object，"page 2" 是页面标题，但目前浏览器会忽略此参数。

使用新的 HTML5 历史记录 API 导航时，如何在我的网站上继续播放音乐？

How do I keep music playing on my website when navigating using the new HTML5 History API?

html

php

api

ajax

history