CODEWITHSUNDEEP
javascriptfunctiononclick
MarkL
MarkL

Reputation: 109

My onlick has 2 functions - but I need one to fire after the other?

I'm no Js expert so im struggling with this somewhat! I hope I can explain this....

This is in a PhoneGap app / iOS and Android.

I have a link the plays an audio file:

<span class="play" onclick="loader(); playAudio('http://a797.phobos.apple.com/us/r30/Music/72/89/b9/mzi.aytblawp.aac.p.m4a','t3')"  id="t3">

So clicking does 2 functions loader() makes a 'loading' icon appear and "playAudio" plays a track.

Heres the js for the functions:

<script>
    function loader() {
        $(".loading").addClass("loadingnow");
    }
</script>

<script>
    function playAudio(src,trackname) {
        //  alert('trackname:' + trackname);
        if (audioPlaying === false) {
            if (device.platform == 'Android') {
                src = '/android_asset/www/' + src;
            }
            media = new Media(src, success, error_error);
            media.play();
            //add playing class
            document.getElementById(trackname).parentNode.className="playing";
            $(".loading").removeClass("loadingnow");
            audioPlaying = true;
        } else {
            //audio is already playing
        }
    }

    function success() {
        $(".playing").removeClass("playing");
        $(".loading").removeClass("loadingnow");
        audioPlaying = false;
    }

    function error_error(e) {
        //alert('great error');
        //alert(e.message);
    }

    function stopAudio() {
        if (media) {
            media.stop();
            audioPlaying = false;
        }
    }
</script>

There is a slight delay for the audio to load - so that is why I have a loader icon appear but in the app all that happens is the audio plays - the loader does not appear. (In the playAudio function when the audio plays it removes the loader)

How do I make the onlick do the loader function and make sure thats done before doing the playAudio function?!?!!

Really stuck!!

Upvotes: 0

Views: 85

Answers (3)

M&#39;sieur Toph&#39;
M&#39;sieur Toph&#39;

Reputation: 2676

Not sure it is the root cause, but maybe you should remove the commented line below:

function playAudio(src,trackname) {
    //  alert('trackname:' + trackname);
    if (audioPlaying === false) {
        if (device.platform == 'Android') {
            src = '/android_asset/www/' + src;
            }
            media = new Media(src, success, error_error);
            media.play();
            //add playing class
            document.getElementById(trackname).parentNode.className="playing";
           // $(".loading").removeClass("loadingnow");  <------ this line removes immediately the class. The sucess function will do this, once the media is loaded 
            audioPlaying = true;
            } else {
            //audio is already playing
        }
    }

Upvotes: 1

Barmar
Barmar

Reputation: 781004

Remove the line:

$(".loading").removeClass("loadingnow");

from playAudio(). It should only be done in the success() function.

Upvotes: 2

Sten Muchow
Sten Muchow

Reputation: 6701

First off pull this into a JS file - no one likes inline JS....

Second have a function that fires both of them

HTML

<span class="play" onclick="loadPlay('http://a797.phobos.apple.com/us/r30/Music/72/89/b9/mzi.aytblawp.aac.p.m4a','t3')"  id="t3">

JS

<script>
   function loadPlay(src, trackName) {
       loader();
       playAudio(src, trackName);
   }

   function loader() {
        $(".loading").addClass("loadingnow");
    }

    function playAudio(src,trackname) {
        //  alert('trackname:' + trackname);
        if (audioPlaying === false) {
            if (device.platform == 'Android') {
                src = '/android_asset/www/' + src;
            }
            media = new Media(src, success, error_error);
            media.play();
            //add playing class
            document.getElementById(trackname).parentNode.className="playing";
            audioPlaying = true;
        } else {
            //audio is already playing
        }
    }

    function success() {
        $(".playing").removeClass("playing");
        $(".loading").removeClass("loadingnow");
        audioPlaying = false;
    }

    function error_error(e) {
        //alert('great error');
        //alert(e.message);
    }

    function stopAudio() {
        if (media) {
            media.stop();
            audioPlaying = false;
        }
    }
</script>

Upvotes: 0

Related Questions