使用新的HTML5 History API進行導航時，如何讓我的網站上播放音樂？

Question

根據已回答的此問題：how-do-soundcloud-keep-music-playing-on-when-navigating

Soundcloud使用由HTML5 -HTML5 History API引入的新API。

所以我想知道，我的網站（音樂服務網站）如何實現這一點，所以我有導航時無縫播放音樂。我已經有一個網站播放音樂（vis1.php - 是音樂播放器），通過使用AJAX將內容加載到模塊包裝器中進行無縫導航時。 然而，這是不切實際的，特別是如果將有很多用戶，所以將php的內容加載到modulewrapper中並不是一個好主意。

所以看起來，HTML5的歷史API是最好的方法根據該articale， 所以我的問題是，我該如何去實現這個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 History API來保存頁面狀態，以便用戶可以「返回」或「前進」。

如果刷新頁面，聲音將停止，因爲文檔請求將發送到服務器。

我不熟悉這種架構，但我認爲您可以使用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是一個與push狀態關聯的對象，「page 2」是頁面標題，但是現在這個參數被瀏覽器忽略。