[UnrealEd]

hello all, back with a question:

i'm making a music player on my website, in javascript. Because i have a lot of music i don't want to load all the songs at the beginning, and then simply start playing them when hitting a button "Play".
i was thinking about using a function that will load the music file and then start playing the song. so far so good, i know how to do this. But while loading i would like to show an animated gif somzthing like this:
http://www.gifs.net/Animation11/Webd...ue_forward.gif

does anybody knows how to do so? i googled for "javascript load", and variants, but i couldn't find it. i checked www.w3schools.com as well

EDIT: if necessary i make this in flash, but i wanted to try javascript first

Thanx,
UnrealEd

[ben.periton]

Maybe you could use AJAX and call the file on demand, then while it is loading show the img, when it is done hide it.

[End User]

Perhaps you could show the image as the background to a table, which would then be hidden behind the player when it loads. Or you could toggle the visibility of some layers to hide or show the image. Or even just toggle a couple of images via javascript, one would be the animated image, the other would be a blank or transparent image.

[UnrealEd]

thx for the replies, but i allready know how i'm going to do it with the image.
this will be the code:

Code:

<img src="play.gif" onclick="javascript:_play(1)" id="play_1">

then i just switch the source of the image to loading.gif and then to pauze.gif when it's playing.

Originally Posted by XTech

Maybe you could use AJAX and call the file on demand, then while it is loading show the img, when it is done hide it.

the only thing i don't know is how to make the while loop that checks whether the file is still loading:

Code:

function _play(id){
  // load the music file here....
  while(!file.loaded){  
    document.getElementById("play_"+id).src = "loading.gif";
  }
  document.getElementById("play_"+id).src = "pause.gif";
  document.getElementById("play_"+id).onclick = 'javascript:_pauze('+id+')';
}

this is how want it to be like. i just don't know how you check whether the file is completely loaded or not.

Thanx,
UnrealEd

[Nico]

You could set the "loading" image on click, and then try

Code:

function _play(id){
  // load the music file here....
  file.onload = function()
  {
     document.getElementById("play_"+id).src = "pause.gif";
     document.getElementById("play_"+id).setAttribute('onclick', '_pauze('+id+');');
  }
}

[UnrealEd]

why didn't i think of that
there's only one problem: the onload doesn't work.
I can't get the file to be loaded. I searched the web, but the only thing i found were embeds with the source allready defined.
i wrote a function that simply changes the src of the embed to the specified file, but i won't load it, nor play it. here's the code:

Code:

function _play(){
	file = document.getElementById("embed");
	document.getElementById("img").src= "../Cyberbokken2.jpg";
	file.src = "garbage.wmv";
	if(file.onload()){
	        file.hidden = "false";
		document.getElementById("img").src = "../s0172578.jpg";
		file.play(false);
	}
}

i'm probably doing something wrong, but i can't find it. Sorry if this is something stupid
UnrealEd