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

Question

According to this Question that has been Answered: how-do-soundcloud-keep-music-playing-on-when-navigating

Soundcloud uses a new API that has been introduced by HTML5 - the HTML5 History API.

So I'm wondering, how do implement this on my website (music service website) so I have music playing seamlessly while navigating. I already have a website that plays music (vis1.php - is the music player) when navigating seamlessly by using AJAX to load the content into a modulewrapper. However big down side to this, is that it's not practical at all, especially if there are going to be many users, so loads the contents of a php into a modulewrapper is not a good idea.

So It seems that HTML5 History API is the best approach to this according to that articale, so my question is, how do I go about implementing this HTML5 History API, or would I be able to implement the HTML5 H.API Along with my Ajax Module wrapper?

<?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>

This is my Javascript Ajax general.js file

(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);
}());

Thanks, How do I go about doing it?

Answer 1

Sound cloud keeps playing the music because the page doesn't change really. They make a couple of ajax request to load info and show you page info based on that requests.

Then, like you said they may be using HTML5 History API to save page states so users can "go back" or "go foward".

If you refresh page the sound will stop because a document request will be made to the server.

I'm not familiar with this kind of architecture but i think you may accomplish this with ease using angularJS. Give it a try:

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

EDIT

Here's how you can change your links: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

Example:

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

This would show yourwebsite.com/bar.html on browser url.

The stateObj is an object associated to push state and the "page 2" is the page title, but for now this parameter is ignored by browsers.