12

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

4
  • If you have static pages, i.e. if really the address changes with every click, I could imagine that such a functionality is not built in because the user doesn't want it. Just imagine there is this one site that started some annoying commercial and you cannot turn it off by leaving the site. Commented Jun 17, 2014 at 9:35
  • @Trilarion - I agree, but this is being intentional, as there are a lot of websites doing this to play their background music. So is there a way to achieve this ??
    – Nitesh
    Commented Jun 17, 2014 at 9:37
  • Maybe they store some playing information in a cookie or in a session id and then continue and start automatically. Can you post an example of a websites playing persistently with static pages? Commented Jun 17, 2014 at 9:40
  • 1
    Sure @Trilarion - I am referring to this post where they have mentioned about such websites. netmix.com/… I am checking each of them and they are working perfectly fine, but I am very sure that they might not be static pages. You can have a look
    – Nitesh
    Commented Jun 17, 2014 at 9:43

3 Answers 3

4

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

Load waterfall

1

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

6
  • 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.
    – Nitesh
    Commented Jun 18, 2014 at 5:49
  • 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. Commented Jun 18, 2014 at 11:34
  • 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
    – Nitesh
    Commented Jun 19, 2014 at 8:48
  • 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? Commented Jun 20, 2014 at 11:03
  • 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
    Commented Jun 21, 2014 at 11:04
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 ]

11
  • 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.
    – VC.One
    Commented Jun 18, 2014 at 1:40
  • Thanks for your answer, but as mentioned in my question, I am not looking for an iFrame/frameset solution.
    – Nitesh
    Commented Jun 18, 2014 at 5:46
  • 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..
    – VC.One
    Commented Jun 18, 2014 at 6:41
  • 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
    – Nitesh
    Commented Jun 18, 2014 at 6:55
  • 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
    Commented Jun 18, 2014 at 7:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.