Continuous background audio

Question

I put a background audio on the site with autoplay and loop, only when I went to another page, the audio started playing from the beginning. Searching the net, I found a Javascript that captures the time elapsed from the audio and, when I change the page, the audio continues from where it left off. The problem is, it works on Firefox, but not on Chrome. Here’s the code I used:

<audio preload="auto" src="../audio/The Clans Join.mp3" loop autobuffer> </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,1);
</script>

Answer 1

To summarize the play of an audio file at a certain position, the server needs to be configured correctly.

The browser sends requests on intervals of bytes ^(byte-range) to collect and reproduce certain regions of a file, so the server must respond appropriately:

In order to support the location and playback of media regions that have not yet been downloaded, Gecko makes use of requests byte-range HTTP 1.1 to collect media from target position.

Also, if headlines are not served X-Content-Duration, Gecko uses requests byte-range to search until the end of the media (assuming the header was served Content-Length), in order to determine the duration of the media.

Therefore, if the server responds to requests byte-range correctly, you can set the initial position of the audio with currentTime:

audio.currentTime = 30;

See: Configuring Servers for Ogg media which also applies to other formats.

Answer

Your problem is with the server and its request configuration byte-range.

Example

Here’s an example for testing that’s working properly on my Google Chome, version 41.0.2272.118 m running on Windows 8.1.

The audio is coming from Wikimedia and given that their servers are configured appropriately for byte-range, I hear perfectly the trombone from the 10th second as an example below.

document.getElementById("all").addEventListener("click", function(event) {

  var song = document.getElementsByTagName('audio')[0];

  song.currentTime = 0;
  song.play();

}, false);


document.getElementById("some").addEventListener("click", function(event) {

  var song = document.getElementsByTagName('audio')[0];

  song.currentTime = 10;
  song.play();

}, false);

<audio src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg">
  Your browser does not support the <code>audio</code> element.
</audio>
<button id="all">Ouvir do ínicio</button>
<button id="some">Ouvir a partir do 10º segundo</button>

<p>Reparar que o ínicio e o resumo aos 10 segundos produzem sons bem diferentes o que nos permite apurar que isto funciona, assumindo a configuração correta do servidor.</p>

---

Credits from the reply to this topic at SOEN which aggregates all information on this subject since 2012.