Question

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

Soundcloud使用HTML5引入的新API - HTML5历史记录API。

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

所以看来HTML5 History 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>

这是我的Javascript Ajax general.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来保存页面状态，以便用户可以“回去”＃34;或者＆＃34;去找＆＃34;。

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

我不熟悉这种架构，但我认为你可以使用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");

这会在浏览器网址上显示yourwebsite.com/bar.html。

stateObj是与推送状态相关联的对象，＆＃34;第2页＆＃34;是页面标题，但目前浏览器会忽略此参数。

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

1 个答案: