Question

I have a JavaScript function where I play a sound file (using phonegap). It normally works fine but I want to change the img src to a loading icon while the file is being downloaded. However, the src is changed
after the file is played.

I tried to add +new Date().getTime() to the end of src, but it didn’t help. Any idea out there?

function playSound(){


var img = $(this).prev();

img.attr("src", "css/images/ajax-loader.gif?"+new Date().getTime());


var url = "http://some.com/fanky.mp3";   
mediaTTS = new Media(url, onSuccessTTS(url), onErrorTTS);
mediaTTS.play();

}

Answer 1

This is probably due to the fact that the image is not re-drawn until the end of the current run loop. If Media.play() is blocking, you might not see the image change until it has finished playing.

To confirm my suspicion, please try this code:

function playSound(){
    var img = $(this).prev();
    img.attr("src", "css/images/ajax-loader.gif?"+new Date().getTime());
    setTimeout(function() {
        var url = "http://some.com/fanky.mp3";   
        mediaTTS = new Media(url, onSuccessTTS(url), onErrorTTS);
        mediaTTS.play();
    }, 100);
}