Question

I’ve tried to really look this one up before asking a question but it looks like I am in a bind here and would like to see if someone knows a clear definite answer to this problem. I’ve seen like one or two similar questions but they didn’t seem to point out my problem or at least I didn’t understand what they were going for.

I am working on an RPG system audio PHP function that plays music when called on and it uses the audio tag if the user doesn’t have their music option on mute. (in the function $song is the song thrown into the first argument.) Now if this function is called to have resume to be true then it uses some javascript. Excuse the code as it is a bit messy (to me) but here’s the following code that includes the javascript code:

function playmusic($song, $resume=false, $loop=true)
 {
  global $baseurl, $loggeduser;

 if ($resume == true)
  {
   $buttons = "
    <button onclick=\"resetplaytime()\" type=\"button\">Reset</button>
    <button onclick=\"alertplaytime()\" type=\"button\">Alert Time</button>";
   $resume = "
    <script type=\"text/javascript\">
      var curmusic_$song = document.getElementById(\"music_$song\");
      var musictime = getcookie(\"musicplaytime_$song\");

     if (musictime != null && musictime != \"\")
      {
       alert(musictime);
       curmusic_$song.currentTime = musictime; 
      }

      window.onload=settimecookie();

     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);
        }
       }
      }

     function settimecookie()
      {
       var playtime = curmusic_$song.currentTime;
      if (playtime != null && playtime != \"\")
       {
        document.cookie = 'musicplaytime_$song=' + playtime;
       }

       setTimeout(\"settimecookie()\", 50);
      }

     function alertplaytime()
      {
       alert(musictime);
      }

     function resetplaytime()
      {
       curmusic_$song.currentTime=0;
      }

    </script>";
  }

 if ($loop == true)
  {
   $songloop = " loop=\"true\"";
  }

 if ($loggeduser['mutemusic'] == 0)
  {
   return "
    </table>
    $buttons
    <audio id=\"music_$song\" autoplay=\"true\"$songloop preload=\"true\">
      <source src=\"$baseurl/boardfiles/effects/$song.ogg\" type=\"audio/ogg\" />
      <source src=\"$baseurl/boardfiles/effects/$song.mp3\" type=\"audio/mp3\" />
    </audio>
    $resume
    <table class=\"brdr\" cellpadding=\"0\">";
  }
 }

Now if I take the alert out of the loop that sets the audio tag’s playtime to the cookie value, the whole script doesn’t work (as in nothing being done) unless you use a button to call one of the functions directly and then that function works.

I’ve tried a few things from making this a function and calling it directly (it seems to only work with onclick events but if you expect it to run while onload or some automatic event then it fails.), moving it around later in the function (along with the onload for settimecookie() as it has to be after this because it will set the cookie to the current playtime), and now I am out of ideas.

I am hoping to get an answer for this as I am sure this code could help others who’ve been trying to get some sort of resume audio function that isn’t bulky or confusing to use. 🙂
I’ve been trying to find a solution for quite awhile and never have been this close. Thank you for reading. If you’d like the whole PHP function then I’ll show that too but there’s really nothing to see except two debug buttons (Reset and Alert cookie) and the audio tag with the id ‘music_$song’.

Edit: Just to be clear, in the code, there are escapes before double quotes because the javascript is being returned in the PHP function.

Edit 2: Have now bolden this edit because it has been missed by some people. In addition I have added the PHP portion.

Last edit: I have now seemed to figure something out that got me closer to what I wish to achieve. I changed the above code to the following and it works flawless for me.

function playmusic($song, $resume=false, $loop=true)
 {
  global $baseurl, $loggeduser;

 if ($resume == true)
  {
   $resume = "
    <!--
    <button onclick=\"resetplaytime();\" type=\"button\">Reset</button>
    <button onclick=\"alertplaytime();\" type=\"button\">Alert Time</button>
    <button onclick=\"settimecookie();\" type=\"button\">Start Cookie tracking</button>
    -->

    <script type=\"text/javascript\">
     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);
        }
       }
      }

     function settimecookie()
      {
       var curmusic_$song = document.getElementById(\"music_$song\");
       var playtime = curmusic_$song.currentTime;
      if (playtime != null && playtime != \"\")
       {
        document.cookie = \"musicplaytime_$song=\" + playtime;
       }

       setTimeout(\"settimecookie()\", 50);
      }

     function resumeplaytime()
      {
       var curmusic_$song = document.getElementById(\"music_$song\");
       var musictime = getcookie(\"musicplaytime_$song\");
      if (musictime != null && musictime != \"\")
       {
        curmusic_$song.currentTime = musictime; 
       }
       curmusic_$song.play(); 

       settimecookie();
      }

      window.onload=resumeplaytime;

     function alertplaytime()
      {
       var musictime = getcookie(\"musicplaytime_$song\");
       alert(musictime);
      }

     function resetplaytime()
      {
       var curmusic_$song = document.getElementById(\"music_$song\");
       curmusic_$song.currentTime=0;
      }

    </script>";
  }
 else
  {
   $autoplay = "autoplay=\"true\"";
  }

 if ($loop == true)
  {
   $songloop = " loop=\"true\"";
  }

 if ($loggeduser['mutemusic'] == 0)
  {
   return "
    </table>
    $resume
    <audio id=\"music_$song\" $autoplay$songloop preload=\"true\">
      <source src=\"$baseurl/boardfiles/effects/$song.ogg\" type=\"audio/ogg\" />
      <source src=\"$baseurl/boardfiles/effects/$song.mp3\" type=\"audio/mp3\" />
    </audio>
    <table class=\"brdr\" cellpadding=\"0\">";
  }
 }

It seems to work perfectly now. I changed a few things and now works as I want it to. Thanks for the help! 🙂

Answer 1

It looks like you try to execute document.getElementById("music_$song") before the DOM is available. Use an onload handler for that.

Yet, I could not find any call to alert() or alertplaytime() that would let that wait – especially not in a loop as you have described.

Also, the line window.onload=settimecookie(); is buggy. settimecookie does not return an event handler function when beeing executed.