Question

I recently made an App for IOS with Phonegap.
I used the html5 audio element to stream audio by clicking a button.
There is an image for the Play-Button. If it is clicked I change it to a Stop-Button (change the src by document.getElementById("xxxxxx").src)

Then I thought it would be useful to show a Loader-Button. So I did.
The problem is: When the Button is clicked I change to the loader and then with a delay of 4 secs to the Stop-Button.
But there must be a better solution even in phonegap.

Now the Question:
Is there a way to recognize/check buffering and the first tone.
I want to show a loader while the device is buffering and when it is finished (Iphone4 1-2sec, Iphone3 5-7sec) the Stop-Button.

Answer 1

I found the following solution:

myaudio.addEventListener("canplaythrough", function () {
   document.getElementById("foo").src = "foo.png";
}, false);
myaudio.play();

If canplaythrough is true – seems to be exactly the point when the phone is starting to play sound.