Continuous background audio

Question

Continuous background audio

Navigation

#1 by (2 votes)

1

I put a background audio on the site with autoplay and loop, but when I went to another page, the audio started playing from the beginning. Looking for the net, I found a JavaScript that captures the elapsed time of the audio, and when I change the page, the audio continues where it left off. The problem is, it works in Firefox, but in Chrome it does not. Here is 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>

html html5-audio

asked by anonymous 10.04.2015 / 01:27

1 answer

Create button menu at the bottom in Google maps v2 android How do I know if the user clicked outside AlertDialog?

score 2 · Answer 1

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

Browser submits requests in byte ranges (byte-range) to collect and play certain regions of a file, so the server should respond appropriately:

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

In addition, if X-Content-Duration headers are not served, Gecko uses byte-range requests to search to the end of the media (assuming it was served the Content-Length header) in order to determine the media's duration.

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

audio.currentTime = 30;

See: Configuring servers for Ogg media that also applies to other formats.

Response

Your problem is on the server and your configuration in relation to byte-range requests.

Example

Here is an example test that is working correctly on my Google Chome, version 41.0.2272.118 m running on Windows 8.1.

The audio comes from WikiMedia and since their servers are configured properly for byte-range , I hear the trombone perfectly from the 10th second as per 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">Yourbrowserdoesnotsupportthe<code>audio</code>element.</audio><buttonid="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>

Response Credits for this topic in SOEN that aggregates all the information on this subject since 2012.