23

I am wondering how I make get an audio file to play 'continuously' on all pages. So if the audio file has played for 20 seconds, then when navigating on another page it will continue from where it left off. I also am trying to get the volume to decrease after navigating away from my home page. Any tips or advice would me appreciated! Thanks =D

<audio src="songforsite.mp3" loop="true" autoplay="true" controls>
Unsupported in Firefox
</audio>
Pavlo
  • 43,301
  • 14
  • 77
  • 113
Joshua Baker
  • 401
  • 1
  • 7
  • 15
  • 2
    You could possibly work out your web site as a "single page site" with the `audio` tag embedded. Switching between "visual" pages is made by AJAX calls and populating the page areas with appropriate content dynamically. Many sites utilize this principle nowadays. – Stan Mar 25 '13 at 10:43

3 Answers3

24

Yes, it is possible. try this:

<audio preload="auto" src="a.mp3" loop="true" autobuffer>
Unsupported in Firefox
</audio>

<script>

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);
</script>
  • 5
    Very clever, but likely to leave a gap between navigations. – PhonicUK Mar 25 '13 at 12:06
  • 1
    I didn't get you properly. can you please explain what is missing? –  Mar 25 '13 at 12:10
  • Oh i forgot. This example uses document.cookie. So you have to run this through server @joshua baker –  Mar 30 '13 at 17:47
  • Thanks and **wonderful idea**, just a small note; if you wrap `JS` in file to include in every page; you need to include it after the ` – wpcoder Nov 06 '17 at 21:12
  • In my case, I had to add `+ "; path=/"` at the end of `var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());`, to make it work fine. And I changed `mp3` file to `ogg` and its working in firefox 59 like a charm – Ghasem Apr 06 '18 at 08:51
  • Nowadays we can use `sessionStorage`. It's easier to use than cookie. – Eric Dec 24 '18 at 13:23
15

If you really navigate to another page, then you will not get really continuous playback.

There are three common approaches:

  • open your audio player in a popup
  • frames: one main frame for your page to display in, a small frame for the audio player
  • not really navigating to other pages, but do everything with AJAX and thereby not actually reloading the page, but only changing parts of the document structure dynamically; maybe adding real link functionality including changing the address bar by using the HTML5 History API

All approaches have their pros/cons. Popup is maybe the easiest to implement, and has the least drawbacks (compared to frames).

I also am trying to get the volume to decrease after navigating away from my home page.

Then catch any clicks on your “home” link/button, and call the volume method of the audio element with a parameter value ranging from 0 to 1 to set the volume.

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • Option 2 is not really an option, since ` – Pavlo Feb 02 '14 at 16:41
  • 3
    That’s nonsense. http://w3.org/TR/html5/embedded-content-0.html#the-iframe-element, http://w3.org/TR/html5/rendering.html#frames-and-framesets – CBroe Feb 02 '14 at 17:50
  • Indeed, I remember the time whey they were dropped from the spec, and I've missed the moment when they were added back in. My bad, upvoted. – Pavlo Feb 02 '14 at 19:53
  • About the third approach, can SEO problems occur in your opinion? – Marco Panichi Aug 02 '18 at 14:09
  • 1
    @MarcoPanichi sure, if you don’t do it ”the right way”, that can cause problems in those regards. But that’s a rather broad topic to begin with, and not specific to this particular continous-audio-play situation, but more to AJAX-using sites in general. – CBroe Aug 02 '18 at 14:22
4

well .. a clean and neat way to do it , is the way that soundcloud.com and spoify.com made through ajaxifing all the pages

fix a page and change the pages content through ajax ,and change the url as well to give the user the illusion of navigating this is not the easiest or fastest solution ,but it's the cleanest one ..far away from the fear of browsers incompatibilities

Mohamed Emad Hegab
  • 2,665
  • 6
  • 39
  • 64
  • Hi there, I know this is an old answer, but I am trying to do this on one of my sites. My concern is, will search engines still be able to index a fully ajaxified site like that? I was thinking the easiest implementation would be to develop pages like normal (no angular or react etc..), and wrap the entire page content inside of a page-wrapper div right after the body tag in HTML. Then, when a link is clicked, remove the content in the current page-wrapper, and load the next page's page-wrapper inside the body of the current page. Is this a good idea? – Jordan Carter Sep 03 '16 at 13:43
  • @JordanCarter if you do it properly yes. Just make sure that the pages load fine when you load it without AJAX, and use real links overwritten by Javascript. – JediBurrell May 10 '18 at 21:20