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

Answer 1

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!.

Answer 2

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

Answer 3

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 ]