my audio gets stopped when i move to another page

Question

I am making a music website. i have installed a audio player in a div just above the footer. but the problem is that whenever i moved to the next page, song stops playing. How can i overcome this situation. I am working on this from a long time but haven't succeeded yet. Someone has suggested me working though i frames but the other one said its not a good option. What shall i do?

This is something really important for me.

I would be really helpful if someone tell me the quick solution for it.

thanks shail

Use ajax or something similar to load the page without having the user move to a new page. Similar to facebook when scrolling down the page. — user2067005, Jun 20 '14 at 06:25
http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first A little google search could help once in a while. — user2067005, Jun 20 '14 at 06:28
is it possible to move to another page using ajax? i mean suppose user is listening a song in one category and then he saw another category and clicks on it then will the music remains operational or it will be stopped — Shail, Jun 20 '14 at 06:38
You need two divs at least. One for the category, one for your music player. That way, when you use ajax to load the new category stuff into the category div, your music player div is unaffected and will continue playing. If they are in the same div, it will stop playing. Now, if you have a play button for each title in a category, you will have to use ajax to load it into the music player div. — user2067005, Jun 20 '14 at 07:11
@user2067005 - Ok.. i know it will be painful but can you write a very short code for above as an example. that will help me alot. i am new to this world and i can learn more using example plss. — Shail, Jun 20 '14 at 07:20
Thanks a lot for this example.. Its the same what i want. :) What you mean bu efficient and secure here? — Shail, Jun 20 '14 at 07:57
Basicly means I didn't do everything I possibly could to make sure a error does not occur. — user2067005, Jun 20 '14 at 08:07
i just experimented with your script..i have a question. in the present script when i click on any category it displays the content in a div Songs. What if i want to display the content of that particular category fully in the div category. — Shail, Jun 20 '14 at 09:27
@user3750945 Add
Categories

Category 1

Category 2

Category 3

to the cat files. Then change the id from songs to category in the script. — user2067005, Jun 20 '14 at 09:54
Thanks alot... One more question please. In the beginning i want to give the listening feature to some regions only. For example lets say i want only region X to see the player div but if someone logins from another region the div for music should be hidden from them. Is it possible? — Shail, Jun 21 '14 at 06:29

score 0 · Answer 1 · edited May 23 '17 at 12:27

Solution One: Use AJAX

The Javascript library jQuery facilitates asynchronous requests to your content.

For instance, after including the necessary .js files, you can use:

$("#SampleLink").click(function() {
  $.ajax({
     url : 'TargetPage.php',
     success: function(data){
        $('#MainBodyContentDIV').html(data);
     }
  });
});

to load the target page's HTML into the DIV with ID MainBodyContentDIV when a link with ID SampleLink is clicked.

This solution requires you to use Javascript and jQuery, and so comes with all the cons (and pros!) of using them. I suggest you to do some reading (if you haven't already) on these before making any serious changes to your site.

For example, you will have to enclose the code above within a function and run it via onClick events, either through jQuery entirely, or through the HTML attribute (which is also named onClick).

This solution will cut down the page refreshes that interrupt your music.

Solution Two: Use an iFrame Anyway

If appropriately styled, this won't be a visual issue. Here's a link to a question about the use of iFrames.

I might be wrong, but I believe that the simplest way for you to work around this problem is to use an iFrame.

score 0 · Answer 2 · answered Jun 20 '14 at 07:48

You asked so you shall receive. By the way, this is by no means efficient or secure. It is just meant to help you by being a reference. I included a YouTube video to replicate the music player.

Credit is do where do, Thanks Thauwa!

Main.php

<!DOCTYPE html>
<html>
<head>

<style>
body{
    font-family:arial;
    margin:0px;
}
ul{
    margin:0px;
}
a{
text-decoration:underline;
cursor:pointer;
}
h3{
margin:0px;
float:left;
}
#category{
    width:980px;
    margin:0px auto;
    background-color:#eee;
    padding:30px 0px;
}
#songs{
    width:980px;
    margin:0px auto;
    background-color:#eee;
    padding:30px 0px;
}
#musicplayer{
    width:980px;
    margin:0px auto;
    background-color:#ccc;
    text-align:center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function cate(page){
  $.ajax({
     url : page,
     success: function(data){
        $('#songs').html(data);
     }
  });
}

</script>
</head>
    <body>
        <div id="category">
            <h1>Categories</h1>
            <ul>
                <li><a onclick="cate('cat1.php')">Category 1</a></li>
                <li><a onclick="cate('cat2.php')">Category 2</a></li>
                <li><a onclick="cate('cat3.php')">Category 3</a></li>
            </ul>
        </div>
        <div id="songs"></div>
        <div id="musicplayer">
            <h3>Music Player</h3>
            <iframe width="560" height="315" src="//www.youtube.com/embed/uiUAq4aVTjY" frameborder="0" allowfullscreen></iframe>
        </div>
    </body>
</html>

cat1.php

<h2>Songs</h2>
<ol>
    <li>Category 1 - Song 1</li>
    <li>Category 1 - Song 2</li>
</ol>

cat2.php

<h2>Songs</h2>
<ol>
    <li>Category 2 - Song 1</li>
    <li>Category 2 - Song 2</li>
</ol>

cat3.php

<h2>Songs</h2>
<ol>
    <li>Category 3 - Song 1</li>
    <li>Category 3 - Song 2</li>
</ol>

my audio gets stopped when i move to another page

Categories

2 Answers2