Keeping audio player persistently/continuously playing while navigating HTML pages

Question

I am using Dewplayer to play a background music on my website. I have done the integration and it works fine.

When I click on my next page, the player stops playing the music until and unless I again click to start which restarts the music. My pages are static HTML pages. Below is my code with the link to the files.

The CSS:

#content {
  margin-left:15%;
  width:500px;
  text-align:left;
}
#hint {
  color:#666;
  margin-left:15%;
  width:300px;
  text-align:left;
  margin-top:3em;
}

The HTML:

  <a href="link1.html">Link1</a>
    <a href="link2.html">Link2</a>
    <a href="link3.html">Link3</a>




<object type="application/x-shockwave-flash" data="dewplayer-mini.swf?mp3=mp3/test2.mp3" width="160" height="20" id="dewplayer-mini"><param name="wmode" value="transparent" /><param name="movie" value="dewplayer-mini.swf?mp3=mp3/test2.mp3" /></object>

So from the above link, when you click to play the music, the music will be played, but as soon as you click on link2 or link3, it will be stopped. What I need is, that it should be played consistently and continuously irrespective of page navigation. People have suggested me using Frameset, iframes or flash (not the flash audio player), but I am not willing to use them.

I searched a lot of such similar question on Stackoverflow which are as below.

https://stackoverflow.com/questions/18411148/continuous-persistant-audio-players

How to keep audio playing while navigating through pages?

Audio Player: Constant playing

The second one suggested that it can be done with Ajax, but I am creating static pages and don't have a great hand on using Ajax.

PS: I am open to using any other player which has this functionality.

EDIT : Created the same using jQuery

As people suggested me to use jQuery/JavaScript for flash, I have created the player using jQuery as below. On the demo, the red Square box is stop/pause and Blue is Play.

The HTML:

<audio id="player" src="http://www.soundjay.com/ambient/check-point-1.mp3"></audio>
<a class="soundIcnPlay" title="button" id="button">&nbsp;</a>

The jQuery Code:

$(document).ready(function() {
    var playing = false;

    $('a#button').click(function() {
        $(this).toggleClass("down");

        if (playing == false) {
            document.getElementById('player').play();
            playing = true;
            $(this).removeClass('soundIcnPlay');
            $(this).addClass('soundIcnPause');

        } else {
            document.getElementById('player').pause();
            playing = false;
            $(this).removeClass('soundIcnPause');
            $(this).addClass('soundIcnPlay');
        }


    });
});

The CSS:

.soundIcnPlay {
    background: none repeat scroll 0 0 red;
    cursor: pointer;
    display: block;
    height: 100px;
    width: 100px;
}

.soundIcnPause {
    background: none repeat scroll 0 0 blue;
    cursor: pointer;
    display: block;
    height: 100px;
    width: 100px;
}

The jsFiddle Link:

Audio Demo

Solution 1

You want to look into CSS layers and even more likely HTML In-Line Frames (i-frames)...

I think this i-frame tutorial [ http://manda.com/iframe/ ] will be enough to achieve what you want. Scroll down to the "Simple Link to iFrame Example" heading and there you will see a demo of an i-frame holding navigation links above another html container of the link pages content (AltaVista, AOL etc). Complete with scrolling.

Anyway the point is: where those navigation links are is where your player would be placed, then you can visit other pages on your site but the player is constantly visible and un-interrupted in its own container i-frame. Closing your site ends the music. Also the browser address might not change as you click links to different pages on your site (since they show via an i-frame at the current url address)

Another good one (see Multiple Frames example):
[ http://www.htmlgoodies.com/tutorials/frames/article.php/3479271 ]

Also here's a basic look into the CSS Layers thingy-majik:
[ http://www.echoecho.com/csslayers.htm ]

Solution 2

This is a wonderful solution without a player. It uses pure HTML5 Audio object; yet there will be a small gap between pages but you won't play from beginning. Hope its acepted gap. Thank you for good question +1.

I am including the answer with little hack to decrease gap between page load.

You can see from attached image; it will load first thing on waterfall; less than 50 ms.... but suitable for testing and local host only. ie. interval to 0 ms.

audio.js file:

function setCookie(c_name,value,exdays)
{
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + 
    ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

function getCookie(c_name)
{
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
      x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
      y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
      x=x.replace(/^\s+|\s+$/g,"");
      if (x==c_name)
        {
        return unescape(y);
        }
      }
}

var song = document.getElementsByTagName('audio')[0];
var played = false;
var tillPlayed = getCookie('timePlayed');
function update()
{
    if(!played){
        if(tillPlayed){
        song.currentTime = tillPlayed;
        song.play();
        played = true;
        }
        else {
                song.play();
                played = true;
        }
    }

    else {
    setCookie('timePlayed', song.currentTime);
    }
}
setInterval(update,1000); 
// default is 1000 ms; but for testing I set that to 0 ms.. 
I guess it's exhausting JS interpreter (don't know much about it).

player.html file:

<html>
<head>
<title>Player</title>
</head>
<body>
    <audio id="audioplayer" autobuffer="" loop="true" preload="auto" src="song.mp3">
    </audio>
    <!-- you must include JS after the player; otherwise you will get undifiend object-->
    <script src="audio.js"></script>
</body>
</html>

• It uses Cookies without a plugin.
• It's not possible to remove the gap permanently; but please feel free to edit if you think that is possible!.

Solution 3

As far as I know AJAX is the only way to have an audio player run cross browser over multiple pages. As soon as the whole page reloads, everything running on it stops, for that reason you are forced to only exchange a part of it. You can save the player position on page exit, but sounds should be off until the new page is loaded and initalized. If course you could also exchange your content in some iframe but that would be giving you new problems.

By the way, it's not scary to load an page into a div using for example jQuery. You could for example add an DIV to your page, the using the jQuery load-function to pull pages into it:

http://api.jquery.com/load/

There's also a jQuery-plugin that automates a few of the tasks you would run into usually, read the answer on the follow SO question:

Load HTML page dynamically into div with jQuery

Comments

[VC.One]

CSS layers won't help better than i-frames but for completion sake's, since they could be an option for someone one day, I added the link.

[Nitesh]

Thanks for your answer, but as mentioned in my question, I am not looking for an iFrame/frameset solution.

[Nitesh]

Yes @Malte .. I agree with your solution, but could you illustrate it with some code with reference to my above code for a much better understanding ?? Thanks for your time and efforts.

[VC.One]

Ah now I see it. Sometimes one has to be told its there before I see it. Can I ask why you wouldn't want frames? They are there to meet your kind of requirement amongst others. Anyways you should see if your (Flash) audio player can set cookies? That's the only other way I can think to keep track of erm... audio tracks (and resume position) when you reach another page. There will always be a "cut" in the audio though when the new page data replaces the current one in the browser container/space. I-frames wouldnt cut audio..

[Nitesh]

iFrames/Frames are not good for SEO purpose as well as, the importance of creating pages is lost if I want to make it into an iframe. For instance, I can make a whole website on jQuery tabs where tabs act as navigation, though, it will serve my audio purpose too, but that is not what I am looking for neither it is advisable for any one making a website with .html pages. As mentioned above, I am also fine replacing the flash one with an HTML one. - @VC.One

[VC.One]

Okay I hear you on the (i)frames issue, If we close that door then cookies are likely your best alternative for a consistent player. That's to say the cookie becomes a central checkpoint for any player copy in the future loaded pages to check what track or time position it should continue from (giving the impression of continuity). HTML or Flash it doesn't matter, but whether they can update their own cookie every second and that every copy of the player in the various .html pages can read-from/update that too etc.

[VC.One]

PS: I'm dubious about (i)Frames & SEO not working together. I hear this same thing about Flash & SEO even to this year but funnily enough I remember back in 2005-2007 looking on Google how to stop Google from indexing the texts in my SWFs. Sometimes I could see the bare SWF source code right there in the search results. WTF.. indeed!! But I solved it by blocking all Robots Caching for my entire domain etc. Those engines are very efficient and aggressive for all/any site data.. Just saying dont limit your options over an imagined fear. Test the S.E's abilites yourself...

[Nitesh]

The iFrames is something that I don't want to use. I want to keep each and every page as a separate HTML page so your cookie solution as well as the below mentioned AJAX one sounds ok. But could you make a demonstration with my example for my further better understanding ?? - @VC.One

[VC.One]

The PS was me just thnking out loud btw. I'm not promoting frames or anything just a shame they werent perfect. As for Flash cookies the app has to have that in its code before its compiled to swf. It cant be turned on after so I cant help with DewPlayer. These cookies are called sharedObjects in AS3. Don't know if Dewplayer has that built-in but I found this issue: link. I dont know AJAX but if you can spot an opportunity with a HTML based player and cookie storage then go for it.

[Nitesh]

I am fine using an HTML player and remove the existing dew player if it solves my purpose. - @VC.One

[Malte Köhrer]

Have you taken a look at the source of pjax.heroku.com/dinosaurs.html ? It shows a simple example of how to structure the page and how to call the pjax script. Make sure you put the audio player outside of the <div> with the dynamic content (<div id="main"> and it should keep playing when the dynamic content is being exchanged.

[VC.One]

Okay look at this second answer ..for implementation ideas read up on these examples: HTML Cookies and also Cookies JScript which is the main thing you need.

[Nitesh]

Thanks @Malte .. I did saw the demo, but could not see any difference when the page changes. I have edited my above question by creating the player with jQuery. As people suggested me to use jQuery/Javascript instead of flash. On the demo, the red Square box is stop/pause and Blue is Play

[Malte Köhrer]

Hello. I took a look at your code and i don't see any references to pjax there. What did you try and what's the problem that you have run into?

[Nitesh]

I have just put simple jQuery pause and play code which plays and pauses the player. I did not try pJax, as I couldn't get any demo files, etc. working on my end. So I made an alternate option. - @Malte

[Nitesh]

Thanks for your time .. Plus 1 for your efforts.

[Nitesh]

Thanks for your time .. Plus 1 for your efforts.