使用新的HTML5歷史記錄API導航時，如何保持音樂在我的網站上播放？

Question

根據已回答的問題： 導航時，soundcloud如何保持音樂播放

Soundcloud使用HTML5引入的新API-HTML5歷史API。

因此，我想知道如何在我的網站（音樂服務網站）上實現此功能，以便在導航時無縫播放音樂。 通過使用AJAX將內容加載到modulewrapper中進行無縫導航時，我已經有一個播放音樂的網站（vis1.php-是音樂播放器）。 但是，這樣做的不利之處在於，它根本不實用，尤其是在會有許多用戶的情況下，因此將php的內容加載到modulewrapper中並不是一個好主意。

因此，根據該專家的說法，似乎HTML5歷史記錄API是實現此目的的最佳方法，所以我的問題是，如何實現該HTML5歷史記錄API，或者我將能夠與我的Ajax一起實現HTML5 H.API？模塊包裝器？

<?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保存頁面狀態，以便用戶可以“返回”或“向前”。

如果刷新頁面，聲音將停止，因為將向服務器發出文檔請求。

我不熟悉這種架構，但是我認為您可以使用angularJS輕松完成此任務。 試試看：

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

編輯

更改鏈接的方法如下： https : //developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

例：

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

這將在瀏覽器URL上顯示yourwebsite.com/bar.html。

stateObj是與推送狀態相關聯的對象，“ page 2”是頁面標題，但是現在此參數已被瀏覽器忽略。