www.webdeveloper.com
Results 1 to 11 of 11

Thread: Track Playing Continuously Throughout Site

Hybrid View

  1. #1
    Join Date
    Apr 2006
    Posts
    23

    Track Playing Continuously Throughout Site

    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/
    Giles Lloyd. Hinckley, Leicester, Nuneaton http://www.gilespcrepairs.co.uk/
    http://www.thebestiphonegame.com/

  2. #2
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    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.

  3. #3
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Your code assumes that a valid value was stored.
    Try
    Code:
    function getStartPos()
    {
           var startPos = sessionStorage.getItem('playbackPosition');
    
           document.getElementById('bgTrack').currentTime = isNaN( startPos ) ? 0 : Math.abs( startPos );
    }
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  4. #4
    Join Date
    Apr 2006
    Posts
    23
    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.
    Giles Lloyd. Hinckley, Leicester, Nuneaton http://www.gilespcrepairs.co.uk/
    http://www.thebestiphonegame.com/

  5. #5
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    What does this show on failure?
    Code:
    function getStartPos() 
    {        
       var startPos = sessionStorage.getItem('playbackPosition'); 
    
       try
       {
          document.getElementById('bgTrack').currentTime = startPos;
       }
       catch( e ){ alert( e + '\n\nFailed with value: ' + startPos ); }
    
    }
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  6. #6
    Join Date
    Oct 2007
    Location
    Western Massachusetts, USA
    Posts
    387
    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.
    Computer programmer / web developer.

  7. #7
    Join Date
    Apr 2006
    Posts
    23
    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
    Giles Lloyd. Hinckley, Leicester, Nuneaton http://www.gilespcrepairs.co.uk/
    http://www.thebestiphonegame.com/

  8. #8
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by gilifer View Post
    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.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  9. #9
    Join Date
    Apr 2006
    Posts
    23
    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;
    }
    }
    Giles Lloyd. Hinckley, Leicester, Nuneaton http://www.gilespcrepairs.co.uk/
    http://www.thebestiphonegame.com/

  10. #10
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    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.

  11. #11
    Join Date
    Dec 2012
    Posts
    1
    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 ?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles