Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Working with timers

    Hello again all,

    I have a new issue this week. To recap: I've built a music jukebox on my experimental website, url removed. Each song in the Jukebox has it's own html file and in that html file a few things are done to run the song in the jukebox. The type of media player requested by the user is determined. Then, that media player is activated playing the song requested. After the amount of seconds needed to play the song have passed a function then calls the next html file which will then play the next song.


    When any html file for a song loads, the <body> tag reads:

    Code:
    <body onLoad="setTimeout('delayer()', 413000)";>

    In the above code the delayer() function (below) is called to open the next html file which will play the next song ("SunrEyes.html" in this case). But first, using the javascript setTimeout() function, 413000 milliseconds (or 6 mins. 53 secs) must pass(in this case). This is the length of the current song being played.


    Code:
    function delayer()
    {
    	var info = DeterminePlayer("WindowsMediaPlayer");
    	if (info == "WindowsMediaPlayer")
    
    	{
    
    
    		var TimerId = setTimeout();
    		alert("Hello   " + TimerID)
    
        	window.location.href = "SunrEyes.html?Player=WindowsMediaPlayer"
        }
    	else
    	{
    		var info = DeterminePlayer("QuickTime");
    		if (info == "QuickTime")
    
    			window.location.href = "SunrEyes.html?Player=QuickTime"
    		}
    	}
    }

    The order of all the songs in the jukebox are prearranged and will play automatically one after the other. As long as the jukebox functions like this there is no problem.


    But.....I give the user the option to select a song from a list of links to each of the song's html file. So what happens is, the timer is thrown off causing descrepencies such as some songs ending early or a lag of time between songs. What I am trying to do is reset the timer every time a song's html file is called either by the user or by the delayer() funtion in each html file's code.

    In researching I have found the clearTimeout() funtion which uses the id of the timer as a parameter. To get the ID parameter of the setTimeout() function and to clear the timer you can code:

    Code:
    var GetTimerID = setTimeout('delayer()','413000');
    clearTimeout(GetTimerID);
    My problem is that I use the javascript function setTimeout('delayer()') in the <body>:

    Code:
    <body onLoad="setTimeout('delayer()', 413000)";>
    My question is, how can I get this Id and then implement the cleartTimeout() function everytime I call a new song's html file?

    I was thinking about having a separate funtion that will reset the timer each time an html file is called, so in the <body onload...> I would call a timerReset() function, hence something like:

    Code:
    <body onLoad="timerReset()">
    Here, the timer would be reset and the song for the current html file would be played. After that, the delayer() funtion would be called to open the next song's html file.

    If you think this is a good idea perhaps you could suggest how to write the timerReset() function. Have tried several things but no luck...



    Thanks!
    Dan


    The entire html file looks like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <title>JukeBox</title>
    
    
    <style type="text/css">
    a:link {color:#0E11A0;text-decoration:none;}
    a:visited {color:#0E11A0;text-decoration:none;}
    a:hover {color:#800080;text-decoration:none;}
    a:active {color:#0E11A0;text-decoration:none;}
    </style>
    
    <script language="javascript1.2" type="text/javascript">
    <!--
    
    
    
    function delayer()
    {
    	var info = DeterminePlayer("WindowsMediaPlayer");
    	if (info == "WindowsMediaPlayer")
    
    	{
    /* **************************************************************************************************************************************************************/
    /* When adding or changing order rename window.location.href to the next tune you want played */
    
    
        	window.location.href = "InYourTime.html?Player=WindowsMediaPlayer"
        }
    	else
    	{
    		var info = DeterminePlayer("QuickTime");
    		if (info == "QuickTime")
    		{
    /* **************************************************************************************************************************************************************/
    /* When adding or changing order rename window.location.href to the next tune you want played */
    
    			window.location.href = "InYourTime.html?Player=QuickTime"
    		}
    	}
    }
    
    /* This function is used to determine what parameters were passed in the url when the user pressed the piano key:
    JukeBox - Windows Media Player or JukeBox - QuickTime. */
    
    function DeterminePlayer(SearchForThisOne)
    {
    	QueryString = window.location.search.substring(1);
    	SplitQueryStringStoreInArray = QueryString.split("=");
    
    		if (SplitQueryStringStoreInArray[1] == SearchForThisOne)
    			{
    				return SplitQueryStringStoreInArray[1];
    			}
    }
    
    -->
    </script>
    
    </head>
    
    <!-- ************************************************************************************************************************************************************* -->
    <!-- Send the amount of seconds needed for the song that this html file will play - not the next tune -->
    
    <body onLoad="setTimeout('delayer()', 198000)"; style="background-color:GRAY; color:#000000; font-family:Verdana, Arial; font-size:12px">
    
    <script type="text/javascript">
    
    
    var info = DeterminePlayer("WindowsMediaPlayer");
    if (info == "WindowsMediaPlayer")
    {
        var str = '';
        str += '<center> Windows Media Player </center>';
        str += '<br><br>';
      	str += '<table align="center" border="0" cellpadding="0" cellspacing="0"><tr><td>';
    	str += '<OBJECT ID="MediaPlayer1" CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"';
        str += ' CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/ en/nsmp2inf.cab#Version=5,1,52,701"';
    	str += 'STANDBY="Loading Microsoft Windows® Media Player components..."';
        str += ' TYPE="application/x-oleobject" width="280" height="46">';
    
    <!-- ************************************************************************************************************************************************************* -->
    <!-- Change name of tune that this html file will play -->
    
    	str += '<PARAM NAME="fileName" VALUE=media/ShirleyLee.mp3>';
    	str += '<PARAM NAME="animationatStart" VALUE="true">';
    	str += '<PARAM NAME="transparentatStart" VALUE="true">';
    	str += '<PARAM NAME="autoStart" VALUE="true">';
    	str += '<PARAM NAME="showControls" VALUE="true">';
    	str += '<EMBED type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"';
    
     <!-- ************************************************************************************************************************************************************* -->
     <!-- Change name of tune that this html file will play -->
    
        str += ' SRC=media/ShirleyLee.mp3 name="MediaPlayer1" width=280 height=46 autostart=1 showcontrols=1><br>';
    	str += '</OBJECT>';
    	str += '</td></tr></table><br>';
        document.write(str);
    }
    else
    {
    		var info = DeterminePlayer("QuickTime");
    		if (info == "QuickTime")
    		{
    				var str = '';
    					str += '<center> QuickTime Player </center>';
    					str += '<br.<br><br><br>';
    					str += '<table align = "center" border="0" cellpadding="0" cellspacing="0">';
    		  			str += '<tr><td>';
    					str += '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"';
    					str += 'codebase="http://www.apple.com/qtactivex/qtplugin.cab"';
    					str += 'width="240" height="16">';
    
    <!-- ************************************************************************************************************************************************************* -->
    <!-- Change name of tune that this html file will play -->
    					str += '<param name="src" value="media/ShirleyLee.mp3">';
    					str += '<param name="scale" value="aspect">';
    					str += '<param name="autoplay" value="true">';
    					str += '<param name="loop" value="false">';
    					str += '<param name="controller" value="true">';
    					str += '<param name="type" value="video/quicktime">';
    					str += '<embed width="240" height="16"';
    
    <!-- ************************************************************************************************************************************************************* -->
    <!-- Change name of tune that this html file will play -->
    
    					str += 'src="media/ShirleyLee.mp3"';
    					str += 'scale="aspect" autoplay="false" loop="false" controller="true" pluginspage="http://www.apple.com/quicktime/download">';
    		 			str += '</embed>';
    		 			str += '</object>';
    					str += '</td></tr>';
    					str += '</table><br>';
    	    		document.write(str);
    	    }
    }
    
    
    
    </script>
    
    
    
    
    <br><br>
    Song now playing:<br><br>
    
    
    <!-- ************************************************************************************************************************************************************* -->
    <!-- Change name of tune that this html file will play -->
    
    <span style="color:#ffffff">Shirley Lee - Dan Pincus</span>
    
    <br><br><br>
    
    The Jukebox will play tunes in the following order. If you want, you can
    select a tune and the Jukebox will start from there
    <br><br>
    
    
    Jukebox Song List:
    <br><br>
    
    <!-- ************************************************************************************************************************************************************* -->
    <!-- Add name of tune that this html file will play -->
    
    <script type="text/javascript">
    <!--
    var info = DeterminePlayer("WindowsMediaPlayer");
    if (info == "WindowsMediaPlayer")
    {
    var str = '';
    str += '1. <a href="ShirleyLee.html?Player=WindowsMediaPlayer">Shirley Lee - Dan Pincus</a><br>';
    str += '2. <a href="InYourTime.html?Player=WindowsMediaPlayer">In Your Time - Dan Pincus</a><br>';
    str += '3. <a href="SunrEyes.html?Player=WindowsMediaPlayer">SunrEyes - Dan Pincus</a><br>';
    str += '4. <a href="OurLoveIsHereToStay.html?Player=WindowsMediaPlayer">Our Love Is Here To Stay - Gershwin</a><br>';
    str += '5, <a href="Emily.html?Player=WindowsMediaPlayer">Emily - Mercer/Mandel</a><br>';
    str += '6, <a href="ForBrothers.html?Player=WindowsMediaPlayer">For Brothers - Dan Pincus</a><br>';
    document.write(str);
    }
    else
    {
    		var info = DeterminePlayer("QuickTime");
    		if (info == "QuickTime")
    		{
    				var str = '';
    				str += '1. <a href="ShirleyLee.html?Player=QuickTime">Shirley Lee</a><br>';
    				str += '2. <a href="InYourTime.html?Player=QuickTime">In Your Time</a><br>';
    				str += '3. <a href="SunrEyes.html?Player=QuickTime">SunrEyes</a><br>';
    				str += '4. <a href="OurLoveIsHereToStay.html?Player=QuickTime">Our Love Is Here To Stay - Gershwin</a><br>';
    				str += '5, <a href="Emily.html?Player=QuickTime">Emily - Mercer/Mandel</a><br>';
    				str += '6, <a href="ForBrothers.html?Player=QuickTime">For Brothers - Dan Pincus</a><br>';
    				document.write(str);
    		}
    }
    
    -->
    </script>
    <br><br>
    
    
    <!--
    <a href="index.html" Target = "Back to Dan's Piano Jazz home page", "javascript:self.close()">Back to Dan's Piano Jazz home page</a>
    -->
    
    <a href="#" onclick="window.open('index.html');window.close();return false;">Back to Dan's Piano Jazz home page</a> <br>
    (The JukeBox will close, but you can re-open it on the home page)
    <br><br>
    <br><a href="javascript:self.close()" >Click here to exit the player</a><br>
    
    
    </body>
    </html>
    Last edited by WA; 12-07-2010 at 08:04 AM.

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Dan:

    Do you know that you can code a cross-browser Windows Media Player and use .wax file to create a play list?

    The following works in IE and FF.

    The first option is "Play All" and calls the play_list_1.wax file, contained in the media folder.

    Note that you must specify the entire path to the "media" folder.

    Note the DOCTYPE. The embed tag is valid in HTML 5.

    Copy and save the following as an .html file:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Cross Browser Media Player with Select List and .wax Playlist</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    	// local folder was used for testing
    	// change to the media files path on your site, or local machine;
    	var mediaPath = "c:/Documents and Settings/ABC.SELF-C18DAAD6BD/Desktop/My Site/media/";   
    
    /* ********* Do not edit below this line ************* */
    
    	var mediaFileName = ""; 
    	var playerEmbedStr = '\<embed type="application\/x-mplayer2" width="325" height="52" showstatusbar="1"  enablecontextmenu="false" src="mediaFileName"\>\<\/embed>';
    	
    	function swapMedia(nSong){
    
    		document.getElementById('playerContainer').innerHTML = playerEmbedStr;
    		var activePlayerStr = playerEmbedStr.replace("mediaFileName", mediaPath + nSong);		
    		document.getElementById('playerContainer').innerHTML = activePlayerStr;
    		self.focus();
    	}
    	
    	function init(){
    
    		document.forms[0]['songList'].onchange = function()
    			{
    			 if (this.value != "")
    				{
    				 swapMedia(this.value);
    				}
    			}
    	}
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
    
    </script>
    <style type="text/css">
    
    	 body {background-color: #fffacd; margin-top: 60px;}
    	 form {width: 350px; margin-left: auto; margin-right: auto; margin-top: 25px;}
    	 select {width: 325px;}
    	#playerContainer {width: 350px; margin-left: auto; margin-right: auto;}
    	
    </style>
    </head>
    	<body>
    		<div id="playerContainer">
    			<embed type="application/x-mplayer2" width="325" height="45">
    			</embed>			
    		</div>
    		
    		<form action="">
    
    			<select name="songList">
    				<option value=""> Choose a Song </option>
    				<option value="./play_list_1.wax"> Play All </option>
    				<option value="song1.mp3"> Don Henley - Heart of the Matter </option>
    				<option value="song2.mp3"> Jackson Browne - The Pretender </option>
    				<option value="song3.mp3"> Lucinda Williams - World Without Tears </option>
    			</select>
    
    		</form>
    	</body>
    </html>
    Copy and save the following as play_list_1.wax. Again, note the complete path.
    Code:
    	<asx version = "3.0">
    		<entry>
    			<ref href = "c:/Documents and Settings/ABC.SELF-C18DAAD6BD/Desktop/My Site/media/song1.mp3"/>
    		</entry>
    		<Entry>
    			<ref href = "c:/Documents and Settings/ABC.SELF-C18DAAD6BD/Desktop/My Site/media/song2.mp3"/>
    		</entry>
    		<entry>
    			<ref href = "c:/Documents and Settings/ABC.SELF-C18DAAD6BD/Desktop/My Site/media/song3.mp3"/>
    		</entry>
    	</asx>
    Create a folder named "media", place your .mp3 or .wma files in inside it, and make sure the main document, and the media folder are in the same directory.

  • #3
    New Coder
    Join Date
    May 2010
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Sciliano

    Thanks for your reply. I will defiantely check out your suggestion for a new way to build a player. But for now, would you have any suggestions on how to do what I want to do and reset the timer?

    Thanks!
    Dan

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    Dan, the point is, you don't need a timer.

    Do you understand that the play list file plays ALL files in the list?

  • #5
    New Coder
    Join Date
    May 2010
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Do you understand that the play list file plays ALL files in the list?
    Sciliano....

    Yes, I understand what you are suggesting. Point is, I am trying to get an answer to my question regarding what I am doing not what you are suggesting as an alternative method to everything that I have been working on for several weeks. Right now, I do not have time to research and figure out what your code means. I'm sure it's a great alternative and like I said I do plan to look at it but not at this time, ok? Chill my friend...

    Would anyone else out there be able to answer my question?

    Old Pedant, jmrker... are you out there?

    Thanks,
    Dan

    p.s. Sciliano - In the meantime I will try to start researching your code....It's a busy weekend for me and my family but I will try and start looking at it....
    Last edited by dan2004; 06-18-2010 at 10:44 PM.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    I'm more than a little mystified.

    I had always believed that a timer (setTimeout) would not survive a page load/reload.

    So when your code does window.location.href = "..." I would have thought that would zap the existing timer.

    But...

    But there is no reason you can't do this:
    Code:
    var GetTimerID = null; // initialize at top of page
    
    function changeDelayer( ... )
    {
        if ( GetTimerID != null ) clearTimeout( GetTimerID );
        ...
    }
    ...
    <body onload="GetTimerID = setTimeout('delayer()', 413000)";>  
    ...
    That is, if you *declare* the variable as a global, then you can assign to it in the onload= and then use it as needed for clearing the timeout.
    Last edited by Old Pedant; 06-18-2010 at 11:41 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    dan2004 (06-19-2010)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,031
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    I guess this would be a more elegant solution:

    Code:
    var timerID = null;
    
    function setDelayer( ms )
    {
        if ( timerID != null ) clearTimeout(timerID);
        timerID = setTimeout( delayer, ms );
    }
    ...
    <body onload="setDelayer(413000)">
    ...
    And any other place you wanted to set the delayer, you similarly call that function, instead of doing it directly.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    dan2004 (06-19-2010)

  • #8
    New Coder
    Join Date
    May 2010
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Old Pedant,

    Thanks, I will try that on Monday. Thanks again for your help.

    Dan

  • #9
    New Coder
    Join Date
    May 2010
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    old pedant

    old pedant,

    Just a note to let you know that you were absolutely correct. When a page loads the timer is always null. I implemented your coding ideas to reset the timer and then printed out the the values of the timer id and no matter how I set up the order of files being called, whether it be automatically by the jukebox, or manually by the user clicking on a link, the timer id was always null right after the page loaded (before the function to reset ran). But I learned a lot.

    Thanks again,
    Dan

    p.s. Sciliano, if you are reading this, I plan on researching your ideas because they look good. Just have to find the time. I'm not really good at javascript and have to do a lot of Googleing to undestand what much of the code means. But thanks!


  •  

    Posting Permissions

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