Track Playing Continuously Throughout Site

[gilifer]

Hi Guys,
I am trying to figure this out, hoping someone can shed some light.
I am trying to get a song to play continuously throughout a site.
I didnt want to use frames.
I decided to use javascript to grab the element.currentTime of a HTML5 audio element and save it to a sessionStorage variable as the page unloads. Then the next page reads that variable and sets the element.currentTime back to that value.

It works fine 9 times out of 10. However (in IE surprise surprise). Every now and then, it fails, the debugger throws the error: Error: DOM Exception: INDEX_SIZE_ERR (1)

Here is the code I am using:

var startPos;
function recordTime(){
sessionStorage.setItem('playbackPosition', document.getElementById('bgTrack').currentTime);
}
function getStartPos(){
startPos = sessionStorage.getItem('playbackPosition');
document.getElementById('bgTrack').currentTime = startPos;
}
window.addEventListener("unload", recordTime, false);


<audio id="bgTrack" autoplay controls loop preload="auto" autobuffer onCanPlay="getStartPos()">
<source src="audio/weightless.mp3">
</audio>



You can view the site here: http://www.gilespcrepairs.co.uk/photography/

[JunkMale]

Suggestion... stick to the "OPT-IN" and record the preference in a cookie so that visitors that return are not needing to "Switch on" the audio content.

The simple reason is that you have no idea what that person is currently doing and you really should ask the user rather than assume that its ok to play music.

BTW, the topic has been covered about music players many times, if you search for the subject of javascript mp3 players, you will find plenty of information as I did.

[Logic Ali]

Your code assumes that a valid value was stored.
Try

function getStartPos()
{
       var startPos = sessionStorage.getItem('playbackPosition');

       document.getElementById('bgTrack').currentTime = isNaN( startPos ) ? 0 : Math.abs( startPos );
}

[gilifer]

Thanks for the reply ali.
If a value has not been stored, the sessionStorage variable returns null and the track plays from the beginning, which is exactly the behaviour I want.

The error is appearing randomly with no pattern that I can see. However, it is not happening when a null value is returned. So that is not the cause of the problem.

[Logic Ali]

What does this show on failure?

function getStartPos() 
{        
   var startPos = sessionStorage.getItem('playbackPosition'); 

   try
   {
      document.getElementById('bgTrack').currentTime = startPos;
   }
   catch( e ){ alert( e + '\n\nFailed with value: ' + startPos ); }

}

[savvykms]

An old-fashioned hack you could try is to have the site hidden within a frameset with a hidden frame where your audio plays. This isn't a very good solution.

A better method is to use a cookie (on unload) to store the current audio position by communicating with the player, then setting it when the player starts on page load if the cookie exists, otherwise starting from the beginning.

Either method described above could be tweaked to allow it to be opt-in or opt-out.

[gilifer]

Hey savvykms,
I was trying to avoid frames altogether. And the method you suggest is essentially wot im trying to implement, just using sessionStorage rather than cookies.

Ali, the error that script provides on failure is:

DOM Exception: INDEX_SIZE_ERR(1)

Failed With Value: 17.25408172607422

[Logic Ali]

Ali, the error that script provides on failure is:

DOM Exception: INDEX_SIZE_ERR(1)

Failed With Value: 17.25408172607422

Perhaps it needs an integer to be reliable. Try flooring the value.

[gilifer]

Ok I tried flooring the value, as well as rounding it to a specific number of decimal places, without success.

the error appears to be completely random and confined to IE. I cannot replicate the problem in any other browser.

It may well just be a bug. So I think what i'm going to do is attempt to set the currentTime to the value of the sessionStorage variable. However on the odd occasion that it fails, set the currentTime to 0 so that the track simply plays from the beginning:


function getStartPos(){
startPos = sessionStorage.getItem('playbackPosition');
startPos = Math.round(startPos*1000)/1000;
if(startPos == null){
startPos = 0;
}
try{
document.getElementById('bgTrack').currentTime = startPos;
}
catch(e){
document.getElementById('bgTrack').currentTime = 0;
}
}

[rnd me]

i am stuggling witht the same issue, but my solution is to never reload the page. i use hash navigatino and ajax to show pages instead of the normal hyperlinks. this is actually very easy if you have consistent html containers in your templates. all you need to do is re-write in-site links to perform an ajax load and dump of the href onclick...

you can poke the href to location.hash so that the url works as expected.
without javascript, the site should still function just as it did before using real <a href> tags to navigate.

[natassa]

Hi Gilifer
I was grateful for that script!
I can't get the music to play in Firefox - it works fine in Safari.
(I don't think it's the script - I think it's the format. I am using the html5 audio and supplying an .ogg.)
Also is there a way to customize the skin of the media player ?